Input
Render a user interface element that resembles or functions as an input field, allowing the user to provide text or other data.
Installation
npx shadcn add https://extend-ui.com/registry/input.json Input core subcomonents and usage
Input.Group
The Input.Group component serves as a container that groups related Input elements and any associated icons, labels, or buttons. It provides a structural wrapper, typically used when the input has additional elements like labels or icons.
<Input placeholder="Enter your name">
<Input.Group>
</Input.Group>
</Input>Input.Label
The Input.Label component displays a label for the input field. It dynamically adjusts based on the focus state of the input and the presence of a value. Input.Label is placed as a child within Input.Group.
<Input>
<Input.Group>
<Input.Label>Username</Input.Label>
</Input.Group>
</Input>Input.LeftIcon
The Input.LeftIcon component renders an icon to the left of the input field. This is typically used for visual cues, such as a user icon for a username input. It is placed as a child within Input.Group
<Input type="email">
<Input.Group>
<Input.Label>Email</Input.Label>
<Input.LeftIcon>
<Icon.email/>
</Input.LeftIcon>
</Input.Group>
</Input>Input.LeftIcon
The Input.RightIcon component displays an icon to the right of the input field. This can be useful for showing status icons or action icons. It is placed as a child within Input.Group```tsx
<Input>
<Input.Group>
<Input.Label>Confirm</Input.Label>
<Input.RightIcon>
<Icon.check/>
</Input.RightIcon>
</Input.Group>
</Input>Input.PasswordToggle
The Input.PasswordToggle component is a button that toggles the visibility of the input's password text, changing the input type between password and text. This should be used alongside an Input with type="password
<Input type="password">
<Input.Group>
<Input.Label>Password</Input.Label>
<Input.PasswordToggle />
</Input.Group>
</Input>Input.ClearButton
The Input.ClearButton component displays a button to the right of the input that clears the input's value when clicked. This is helpful for input fields that may require quick clearing.
<Input placeholder="Search something">
<Input.Group>
<Input.ClearButton onClick={handleClear}/>
</Input.Group>
</Input>Complete Example with Multiple Elements
Below is a more comprehensive example that combines multiple sub-components.
<Input type="password" maxLength={30}>
<Input.Group>
<Input.Label>Password</Input.Label>
<Input.LeftIcon>
<Icon.lock/>
</Input.LeftIcon>
<Input.PasswordToggle />
<Input.ClearButton onClick={handleClear}/>
</Input.Group>
</Input>Input component props
| Name | Type | Description |
|---|---|---|
| variant | default | filled | flushed | flushedfilled | dashed | Defines the visual style of the input field. |
| type | string | Specifies the input type, such as "text", "password", etc. |
| error | boolean | If true, applies error styling to the input field. |
| textError | string | Error message displayed when error is true. |
| maxLength | number | Maximum number of characters allowed in the input field. |
| value | string | number | Controlled value for the input field. |
| required | boolean | If true, marks the input field as required. |
| disabled | boolean | If true, disables the input field. |
| children | React.ReactNode | Content nested within the input, such as icons or labels. |
| ref | React.Ref<HTMLInputElement> | Ref to the input element for direct DOM manipulation. |
| onFocus | (e: React.FocusEvent<HTMLInputElement>) => void | Event handler called when the input is focused. |
| onBlur | (e: React.FocusEvent<HTMLInputElement>) => void | Event handler called when the input loses focus. |
| className | string | Additional CSS classes to style the input component. |
| ...props | React.InputHTMLAttributes | Additional props like onChange, placeholder, etc. |