Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Input

Input is a component used to obtain text input from the user.

Source@yamada-ui/input

Import

import {
  Input,
  InputGroup,
  InputLeftAddon,
  InputRightAddon,
  InputLeftElement,
  InputRightElement,
} from "@yamada-ui/react"
Copied!
  • 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" />
Copied!

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>
Copied!

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>
Copied!

Specify HTML Size

Use htmlSize to specify the width of the input field.

Editable example

<Input htmlSize={4} width="auto" />
Copied!

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>
Copied!

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>
Copied!

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>
Copied!

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>
Copied!

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>
Copied!

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>
Copied!

Add Elements

To add elements, wrap Input with InputGroup and use InputLeftElement or InputRightElement.

Editable example

const [show, { toggle }] = useBoolean()

return (
  <VStack>
    <InputGroup>
      <InputLeftElement>
        <PhoneIcon color="gray.500" />
      </InputLeftElement>

      <Input type="tel" placeholder="your phone number" />
    </InputGroup>

    <InputGroup>
      <InputLeftElement>
        <MailIcon color="gray.500" />
      </InputLeftElement>

      <Input type="email" placeholder="your email address" />

      <InputRightElement>
        <CheckIcon color="green.500" />
      </InputRightElement>
    </InputGroup>

    <InputGroup size="md">
      <Input
        pr="4.5rem"
        type={show ? "text" : "password"}
        placeholder="your password"
      />

      <InputRightElement w="4.5rem" isClickable>
        <Button h="1.75rem" size="sm" onClick={toggle}>
          {show ? "Hide" : "Show"}
        </Button>
      </InputRightElement>
    </InputGroup>
  </VStack>
)
Copied!

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" />
Copied!

Control

Editable example

const [value, setValue] = useState<string>("オッス！オラ悟空！")

return <Input value={value} onChange={(ev) => setValue(ev.target.value)} />
Copied!

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>
          <MailIcon 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>
)
Copied!

Edit this page on GitHub

PreviousIconButtonNextNumberInput