Textbox
Textbox component is used for single-line text input.
Examples
Default Basic text input with placeholder. Includes a clear button that appears when the input has value.
1import { Input } from '@devup-ui/components'
2
3export default function Default() {
4 return <Input placeholder="Enter text here" />
5}
61import { Input } from '@devup-ui/components'
2
3export default function Default() {
4 return <Input placeholder="Enter text here" />
5}
6Error
Use error prop to display the input in an error state with a red border. Use errorMessage prop to show a validation message below the input.
1import { Input } from '@devup-ui/components'
2
3export default function ErrorDemo() {
4 return (
5 <Input
6 error
7 errorMessage="This field is required"
8 placeholder="Enter text"
9 />
10 )
11}
121import { Input } from '@devup-ui/components'
2
3export default function ErrorDemo() {
4 return (
5 <Input
6 error
7 errorMessage="This field is required"
8 placeholder="Enter text"
9 />
10 )
11}
12Disabled
Use disabled prop to prevent user interaction. The input will have a muted appearance and the clear button will be hidden.
1import { Input } from '@devup-ui/components'
2
3export default function Disabled() {
4 return <Input disabled placeholder="Disabled input" />
5}
61import { Input } from '@devup-ui/components'
2
3export default function Disabled() {
4 return <Input disabled placeholder="Disabled input" />
5}
6Icon
Pass a React node to the icon prop to display an icon on the left side of the input. Useful for search fields or inputs with visual context.
1import { Input } from '@devup-ui/components'
2
3function SearchIcon() {
4 return (
5 <svg
6 aria-hidden="true"
7 fill="none"
8 height="20"
9 viewBox="0 0 20 20"
10 width="20"
11 xmlns="http://www.w3.org/2000/svg"
12 >
13 <path
14 d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
15 stroke="currentColor"
16 strokeLinecap="round"
17 strokeLinejoin="round"
18 strokeWidth="1.5"
19 />
20 </svg>
21 )
22}
23
24export default function WithIcon() {
25 return <Input icon={<SearchIcon />} placeholder="Search..." />
26}
271import { Input } from '@devup-ui/components'
2
3function SearchIcon() {
4 return (
5 <svg
6 aria-hidden="true"
7 fill="none"
8 height="20"
9 viewBox="0 0 20 20"
10 width="20"
11 xmlns="http://www.w3.org/2000/svg"
12 >
13 <path
14 d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
15 stroke="currentColor"
16 strokeLinecap="round"
17 strokeLinejoin="round"
18 strokeWidth="1.5"
19 />
20 </svg>
21 )
22}
23
24export default function WithIcon() {
25 return <Input icon={<SearchIcon />} placeholder="Search..." />
26}
27API
Input props extends the input HTML attributes (except type).
| Prop | description | Type | Default |
|---|---|---|---|
| type | The type of the input (excludes file type) |
|
|
| typography | Typography style key from the theme |
|
|
| error | Whether the input is in an error state |
|
|
| errorMessage | Error message to display below the input |
|
|
| allowClear | Whether to show a clear button when input has value |
|
|
| onClear | Callback when the clear button is clicked |
|
|
| icon | Icon to display on the left side of the input |
|
|
| disabled | Whether the input is disabled |
|
|
| classNames | Custom class names for inner elements |
|
|
| colors | Custom color variables for the input |
|
|