║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Input description: A native input element.

links: doc: https://base-ui.com/react/components/input#api-reference

<ComponentPreview name="input-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/input

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="input" title="components/ui/input.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

import { Input } from "@/components/ui/input"

<Input />

Examples

For accessible labelling and validation, prefer using the Field component to wrap inputs, or the FieldControl component. See some related examples.

Small Size

<ComponentPreview name="input-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Large Size

<ComponentPreview name="input-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Disabled

<ComponentPreview name="input-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

File

<ComponentPreview name="input-file" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Label

<ComponentPreview name="input-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Button

<ComponentPreview name="input-with-button" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Form Integration

<ComponentPreview name="form-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Comparing with shadcn

Compared to shadcn/ui, our Input component includes size variants for better density control. shadcn/ui inputs have a fixed height of 36px, while our component offers flexible sizing with sm (28px), default (32px), and lg (36px) options.

So, if you want to preserve the original shadcn/ui input height (36px), you should use the lg size in coss ui.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║