<Input placeholder="Enter your email" />Examples
Variants
Use the variant prop to change the visual style of the input.
<div className="flex flex-col gap-2">
<Input variant="subtle" placeholder="Subtle" />
<Input variant="outline" placeholder="Outline" />
</div>Sizes
Use the size prop to change the size of the input.
<div className="flex flex-col gap-2">
<Input placeholder="size (xs)" size="xs" />
<Input placeholder="size (sm)" size="sm" />
<Input placeholder="size (md)" size="md" />
<Input placeholder="size (lg)" size="lg" />
<Input placeholder="size (xl)" size="xl" />
</div>Helper Text
Pair the input with the Field component to add helper text.
We'll never share your email.
We'll never share your email.
<div className="flex gap-10">
<Field required label="Email" helperText="We'll never share your email.">
<Input placeholder="Enter your email" />
</Field>
<Field required label="Email" helperText="We'll never share your email.">
<Input placeholder="Enter your email" variant="outline" />
</Field>
</div>Error Text
Pair the input with the Field component to add error text.
This field is required.
This field is required.
<div className="flex gap-10">
<Field invalid label="Email" helperText="This field is required.">
<Input placeholder="Enter your email" />
</Field>
<Field invalid label="Email" helperText="This field is required.">
<Input placeholder="Enter your email" variant="outline" />
</Field>
</div>Field
Compose the input with the Field component to add a label, helper text, and error text.
<div className="flex gap-10">
<Field required label="Email">
<Input placeholder="me@example.com" />
</Field>
<Field required label="Email">
<Input placeholder="me@example.com" variant="outline" />
</Field>
</div>Disabled
Use the disabled prop to disable the input.
<Input disabled placeholder="disabled" />