Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Input

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

ソース@yamada-ui/input

インポート

import {
  Input,
  InputGroup,
  InputLeftAddon,
  InputRightAddon,
  InputLeftElement,
  InputRightElement,
} from "@yamada-ui/react"
Copied!
  • Input: テキスト入力を取得するコンポーネントです。
  • InputGroup: インプットに関連するコンポーネントをグループ化するためのラッパーコンポーネントです。
  • InputLeftAddon: インプットの左側に配置されるアドオンを表示するコンポーネントです。
  • InputRightAddon: インプットの右側に配置されるアドオンを表示するコンポーネントです。
  • InputLeftElement: `インプットの左側に配置されるアイコンやボタンなどを表示するコンポーネントです。
  • InputRightElement: インプットの右側に配置されるアイコンやボタンなどを表示するコンポーネントです。

使い方

編集可能な例

<Input placeholder="basic" />
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <Input variant="outline" placeholder="outline" />
  <Input variant="filled" placeholder="filled" />
  <Input variant="flushed" placeholder="flushed" />
  <Input variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

サイズを変更する

編集可能な例

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

HTMLサイズを指定する

htmlSizeを使用して、入力フィールドの幅を指定できます。

編集可能な例

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

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。

編集可能な例

<VStack>
  <Input focusBorderColor="green.500" placeholder="custom border color" />
  <Input
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

プレースホルダーのカラーを変更する

プレースホルダーのカラーを変更する場合は、_placeholderにpropsを設定します。

編集可能な例

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

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

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

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

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

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

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

アドオンを追加する

アドオンを追加する場合は、InputをInputGroupでラッピングし、InputLeftAddonまたはInputRightAddonを使用します。

編集可能な例

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

要素を追加する

要素を追加する場合は、InputをInputGroupでラッピングし、InputLeftElementまたはInputRightElementを使用します。

編集可能な例

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!

タイプをカスタマイズする

タイプをカスタマイズする場合は、typeにインプットのタイプを設定します。

編集可能な例

<Input placeholder="Select Date and Time" size="md" type="datetime-local" />
Copied!

制御する

編集可能な例

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

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

React Hook Formを使う

編集可能な例

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!

GitHubでこのページを編集する

前IconButton次NumberInput