Input
Input
is a component used to obtain text input from the user.
Import
import {Input,InputGroup,InputLeftAddon,InputRightAddon,InputLeftElement,InputRightElement,} from "@yamada-ui/react"
Input
: A component for obtaining text input.InputGroup
: A wrapper component for grouping related input components.InputLeftAddon
: A component that displays an addon on the left side of the input.InputRightAddon
: A component that displays an addon on the right side of the input.InputLeftElement
: A component that displays icons or buttons on the left side of the input.InputRightElement
: A component that displays icons or buttons on the right side of the input.
Usage
Editable example
<Input placeholder="basic" />
Change Variants
Editable example
<VStack> <Input variant="outline" placeholder="outline" /> <Input variant="filled" placeholder="filled" /> <Input variant="flushed" placeholder="flushed" /> <Input variant="unstyled" placeholder="unstyled" /> </VStack>
Change Size
Editable example
<VStack> <Input placeholder="extra small size" size="xs" /> <Input placeholder="small size" size="sm" /> <Input placeholder="medium size" size="md" /> <Input placeholder="large size" size="lg" /> </VStack>
Specify HTML Size
Use htmlSize
to specify the width of the input field.
Editable example
<Input htmlSize={4} width="auto" />
Change Border Color
To change the border color, set a color to focusBorderColor
or errorBorderColor
.
Editable example
<VStack> <Input focusBorderColor="green.500" placeholder="custom border color" /> <Input isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
Change Placeholder Color
To change the placeholder color, set props
to _placeholder
.
Editable example
<VStack> <Input placeholder="custom placeholder" _placeholder={{ opacity: 1, color: "blue.500" }} _dark={{ _placeholder: { opacity: 1, color: "blue.500" } }} /> <Input color="green.500" placeholder="custom placeholder" _placeholder={{ color: "inherit" }} _dark={{ _placeholder: { color: "inherit" }, }} /> </VStack>
Disable
To disable, set isDisabled
to true
.
Editable example
<VStack> <Input isDisabled variant="outline" placeholder="outline" /> <Input isDisabled variant="filled" placeholder="filled" /> <Input isDisabled variant="flushed" placeholder="flushed" /> <Input isDisabled variant="unstyled" placeholder="unstyled" /> <FormControl isDisabled label="Email address" helperMessage="We'll never share your email." > <Input type="email" placeholder="your email address" /> </FormControl> </VStack>
Make Read-Only
To make read-only, set isReadOnly
to true
.
Editable example
<VStack> <Input isReadOnly variant="outline" placeholder="outline" /> <Input isReadOnly variant="filled" placeholder="filled" /> <Input isReadOnly variant="flushed" placeholder="flushed" /> <Input isReadOnly variant="unstyled" placeholder="unstyled" /> <FormControl isReadOnly label="Email address" helperMessage="We'll never share your email." > <Input type="email" placeholder="your email address" /> </FormControl> </VStack>
Make Input Invalid
To make the input invalid, set isInvalid
to true
.
Editable example
<VStack> <Input isInvalid variant="outline" placeholder="outline" /> <Input isInvalid variant="filled" placeholder="filled" /> <Input isInvalid variant="flushed" placeholder="flushed" /> <Input isInvalid variant="unstyled" placeholder="unstyled" /> <FormControl isInvalid label="Email address" errorMessage="Email is required." > <Input type="email" placeholder="your email address" /> </FormControl> </VStack>
Add Addons
To add addons, wrap Input
with InputGroup
and use InputLeftAddon
or InputRightAddon
.
Editable example
<VStack> <InputGroup> <InputLeftAddon>+81</InputLeftAddon> <Input type="tel" placeholder="your phone number" /> </InputGroup> <InputGroup> <InputLeftAddon>https://</InputLeftAddon> <Input placeholder="your site address" /> <InputRightAddon>.com</InputRightAddon> </InputGroup> </VStack>
Add Elements
To add elements, wrap Input
with InputGroup
and use InputLeftElement
or InputRightElement
.
Editable example
const [show, { toggle }] = useBoolean() return ( <VStack> <InputGroup> <InputLeftElement> <Phone color="gray.500" /> </InputLeftElement> <Input type="tel" placeholder="your phone number" /> </InputGroup> <InputGroup> <InputLeftElement> <Mail color="gray.500" /> </InputLeftElement> <Input type="email" placeholder="your email address" /> <InputRightElement> <Check color="green.500" /> </InputRightElement> </InputGroup> <InputGroup size="md"> <Input pr="4.5rem" type={show ? "text" : "password"} placeholder="your password" /> <InputRightElement w="4.5rem" isClick> <Button h="1.75rem" size="sm" onClick={toggle}> {show ? "Hide" : "Show"} </Button> </InputRightElement> </InputGroup> </VStack> )
Customize Type
To customize the type, set the type of input to type
.
Editable example
<Input placeholder="Select Date and Time" size="md" type="datetime-local" />
Control
Editable example
const [value, setValue] = useState<string>("オッス!オラ悟空!") return <Input value={value} onChange={(ev) => setValue(ev.target.value)} />
Use React Hook Form
Editable example
type Data = { name: string; cellphone: string; email: string } const { register, handleSubmit, watch, formState: { errors }, } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => { console.log("submit:", data) } console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.name} label="Name" errorMessage={errors.name ? errors.name.message : undefined} > <Input placeholder="孫悟空" {...register("name", { required: { value: true, message: "This is required." }, })} /> </FormControl> <FormControl isInvalid={!!errors.cellphone} label="Cellphone" errorMessage={errors.cellphone ? errors.cellphone.message : undefined} > <InputGroup> <InputLeftAddon>+81</InputLeftAddon> <Input type="tel" placeholder="0000-0000" {...register("cellphone", { required: { value: true, message: "This is required." }, })} /> </InputGroup> </FormControl> <FormControl isInvalid={!!errors.email} label="Email" errorMessage={errors.email ? errors.email.message : undefined} > <InputGroup> <InputLeftElement> <Mail color="gray.500" /> </InputLeftElement> <Input type="email" placeholder="your-address@example.com" {...register("email", { required: { value: true, message: "This is required." }, })} /> </InputGroup> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub