Devup UI - Textbox

Textbox

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.

Show Code

1import { Input } from '@devup-ui/components'
2
3export default function Default() {
4    return <Input placeholder="Enter text here" />
5}
6

1import { Input } from '@devup-ui/components'
2
3export default function Default() {
4    return <Input placeholder="Enter text here" />
5}
6

This field is required

Error 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.

Show Code

1import { Input } from '@devup-ui/components'
2
3export default function Error() {
4    return (
5        <Input
6            error
7            errorMessage="This field is required"
8            placeholder="Enter text"
9        />
10    )
11}
12

1import { Input } from '@devup-ui/components'
2
3export default function Error() {
4    return (
5        <Input
6            error
7            errorMessage="This field is required"
8            placeholder="Enter text"
9        />
10    )
11}
12

Disabled Use disabled prop to prevent user interaction. The input will have a muted appearance and the clear button will be hidden.

Show Code

1import { Input } from '@devup-ui/components'
2
3export default function Disabled() {
4    return <Input disabled placeholder="Disabled input" />
5}
6

1import { Input } from '@devup-ui/components'
2
3export default function Disabled() {
4    return <Input disabled placeholder="Disabled input" />
5}
6

Icon 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.

Show Code

1import { Input } from '@devup-ui/components'
2
3function SearchIcon() {
4    return (
5        <svg
6            fill="none"
7            height="20"
8            viewBox="0 0 20 20"
9            width="20"
10            xmlns="http://www.w3.org/2000/svg"
11        >
12            <path
13                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"
14                stroke="currentColor"
15                strokeLinecap="round"
16                strokeLinejoin="round"
17                strokeWidth="1.5"
18            />
19        </svg>
20    )
21}
22
23export default function WithIcon() {
24    return <Input icon={<SearchIcon />} placeholder="Search..." />
25}
26

1import { Input } from '@devup-ui/components'
2
3function SearchIcon() {
4    return (
5        <svg
6            fill="none"
7            height="20"
8            viewBox="0 0 20 20"
9            width="20"
10            xmlns="http://www.w3.org/2000/svg"
11        >
12            <path
13                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"
14                stroke="currentColor"
15                strokeLinecap="round"
16                strokeLinejoin="round"
17                strokeWidth="1.5"
18            />
19        </svg>
20    )
21}
22
23export default function WithIcon() {
24    return <Input icon={<SearchIcon />} placeholder="Search..." />
25}
26

API

Input props extends the input HTML attributes (except type).

Prop	description	Type	Default
type	The type of the input (excludes file type)	`Exclude<InputType, 'file'>`	`undefined`
typography	Typography style key from the theme	`keyof DevupThemeTypography`	`undefined`
error	Whether the input is in an error state	`boolean`	`false`
errorMessage	Error message to display below the input	`string`	`undefined`
allowClear	Whether to show a clear button when input has value	`boolean`	`true`
onClear	Callback when the clear button is clicked	`() => void`	`undefined`
icon	Icon to display on the left side of the input	`React.ReactNode`	`undefined`
disabled	Whether the input is disabled	`boolean`	`false`
classNames	Custom class names for inner elements	`{ container?: string input?: string icon?: string errorMessage?: string }`	`undefined`
colors	Custom color variables for the input	`{ primary?: string error?: string text?: string base?: string iconBold?: string border?: string inputBackground?: string primaryFocus?: string negative20?: string }`	`undefined`