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.
https://
.com
https://
.com
https://
.com
<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)} />
If you use this code, you need to add
"use client" to the top of the file.Props
Accessibility
Currently, this section is being updated due to the migration of v2.