Input
Input is a component used to obtain text input from the user.
<Input placeholder="Placeholder" />
Usage
import { Input, InputGroup } from "@yamada-ui/react"
import { Input, InputGroup } from "@/components/ui"
import { Input, InputGroup } from "@workspaces/ui"
<Input />
<InputGroup.Root>
<InputGroup.Addon />
<Input />
<InputGroup.Element />
</InputGroup.Root>
Change Variant
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Change Size
<VStack>
<For each={["sm", "md", "lg"]}>
{(size) => <Input key={size} size={size} placeholder={`Size (${size})`} />}
</For>
</VStack>
Change Color Scheme
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<Input
key={colorScheme}
colorScheme={colorScheme}
placeholder={toTitleCase(colorScheme)}
/>
)}
</For>
</VStack>
Disable
To disable the input, set disabled to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
disabled
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Read-Only
To read-only, set readOnly to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
readOnly
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Invalid
To make invalid, set invalid to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
invalid
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Add Addons
To add addons, wrap the Input in InputGroup and use InputGroup.Addon.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<InputGroup.Root key={variant} variant={variant}>
<InputGroup.Addon>https://</InputGroup.Addon>
<Input placeholder="Your site address" />
<InputGroup.Addon>.com</InputGroup.Addon>
</InputGroup.Root>
)}
</For>
</VStack>
Add Elements
To add elements, wrap the Input in InputGroup and use InputGroup.Element.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<InputGroup.Root key={variant} variant={variant}>
<InputGroup.Element>
<PhoneIcon />
</InputGroup.Element>
<Input type="tel" placeholder="Your phone number" />
</InputGroup.Root>
)}
</For>
</VStack>
Change Type
To change the type, set type to the type.
<Input placeholder="Select Date and Time" type="datetime-local" />
Change Border Color
To change the border color, set focusBorderColor or errorBorderColor to the color.
<VStack>
<Input focusBorderColor="green.500" placeholder="Custom focus border color" />
<Input
errorBorderColor="orange.500"
invalid
placeholder="Custom invalid border color"
/>
</VStack>
Change Placeholder Color
To change the placeholder color, set _placeholder to the value.
<Input placeholder="Custom placeholder" _placeholder={{ color: "blue.500" }} />
Floating Label
<Field.Root>
<Input type="email" data-peer placeholder="" />
<Field.Label
css={{
bg: "bg",
fontSize: "sm",
fontWeight: "normal",
insetStart: "2",
pointerEvents: "none",
position: "absolute",
px: "1",
top: "-12px",
transitionDuration: "moderate",
transitionProperty: "top, color, font-size",
transitionTimingFunction: "ease-in-out",
zIndex: "yamcha",
_peerPlaceholderShown: {
color: "fg.subtle",
fontSize: "md",
insetStart: "2",
top: "5px",
},
_peerFocusVisible: {
color: "fg",
fontSize: "sm",
insetStart: "2",
top: "-12px",
},
}}
>
Email
</Field.Label>
</Field.Root>
Control
const [value, setValue] = useState<string>("オッス！オラ悟空！")
return <Input value={value} onChange={(ev) => setValue(ev.target.value)} />
"use client" to the top of the file.Props
Accessibility
If you are not using Field.Root, set aria-label or aria-labelledby to Input.
<Input type="email" aria-label="Email address" />
<VStack gap="sm">
<Text as="h3" id="label">
Email address
</Text>
<Input type="email" aria-labelledby="label" />
</VStack>
ARIA Roles and Attributes
| Component | Roles and Attributes | Usage |
|---|---|---|
Input | aria-invalid | Sets to "true" if invalid is set. |
aria-disabled | Sets to "true" if disabled is set. | |
aria-describedby | If Input is within a Field.Root and Field.Root has an errorMessage, helperMessage, or a Field.ErrorMessage, Field.HelperMessage, sets its id. | |
aria-readonly | Sets to "true" if readOnly is set. | |
aria-required | Sets to "true" if required is set. |
Similar Components
Editable
Editable is a component used to obtain inline editable text input.
NumberInput
NumberInput is a component used to obtain numeric input from the user.
PasswordInput
PasswordInput is a component that allows users to input passwords with a visibility toggle.
PinInput
PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.
Textarea
Textarea is a component used to obtain multi-line text input.
FileInput
FileInput is a component used for users to select files.
Autocomplete
Autocomplete is a component used to display suggestions in response to user text input.
Checkbox
Checkbox is a component used for allowing users to select multiple values from multiple options.
Uses Components & Hooks
Field
Field is a component used to group form elements with label, helper message, error message, etc.
Group
Group is a component that groups and attaches multiple elements together.
Used By Components & Hooks
Autocomplete
Autocomplete is a component used to display suggestions in response to user text input.
Checkbox
Checkbox is a component used for allowing users to select multiple values from multiple options.
CheckboxCard
CheckboxCard is a component used for allowing users to select multiple values from multiple options.
ColorPicker
ColorPicker is a component used by the user to select a color or enter an arbitrary color value.
DatePicker
DatePicker is a component used for users to select a date.
Dropzone
Dropzone is a component used for uploading files via drag and drop.
Editable
Editable is a component used to obtain inline editable text input.
FileButton
FileButton is a button component used for users to select files.
FileInput
FileInput is a component used for users to select files.
NativeSelect
NativeSelect is a component used for allowing users to select one value from a list of options. It displays a native dropdown list provided by the browser (user agent).
NumberInput
NumberInput is a component used to obtain numeric input from the user.
PasswordInput
PasswordInput is a component that allows users to input passwords with a visibility toggle.
PinInput
PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.
Radio
Radio is a component used for allowing users to select one option from multiple choices.
RadioCard
RadioCard is a component used for allowing users to select one option from multiple choices.
Select
Select is a component used for allowing a user to choose values from a list of options.
Textarea
Textarea is a component used to obtain multi-line text input.
Toggle
Toggle is a component that has two states: on or off.