Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

NumberInput

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

ソース@yamada-ui/number-input

インポート

import { NumberInput } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<NumberInput placeholder="basic" />
Copied!

バリアントを変更する

編集可能な例

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

サイズを変更する

編集可能な例

<VStack>
  <NumberInput placeholder="extra small size" size="xs" />
  <NumberInput placeholder="small size" size="sm" />
  <NumberInput placeholder="medium size" size="md" />
  <NumberInput placeholder="large size" size="lg" />
</VStack>
Copied!

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

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

編集可能な例

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

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

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

編集可能な例

<VStack>
  <NumberInput
    placeholder="custom placeholder"
    _placeholder={{ opacity: 1, color: "gray.500" }}
  />
  <NumberInput
    color="green.500"
    placeholder="custom placeholder"
    _placeholder={{ color: "inherit" }}
  />
</VStack>
Copied!

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに文字列または数値を設定します。

編集可能な例

<NumberInput defaultValue={18} />
Copied!

最小値と最大値を設定する

最小値と最大値を設定する場合は、minまたはmaxに数値を設定します。

編集可能な例

<NumberInput defaultValue={18} min={8} max={31} />
Copied!

ステップ値を設定する

ステップ値を設定する場合は、stepに数値を設定します。

編集可能な例

<NumberInput defaultValue={15} step={5} min={5} max={30} />
Copied!

小数点を設定する

小数点を設定する場合は、precisionに数値を設定します。

編集可能な例

<NumberInput defaultValue={15} precision={2} step={0.2} />
Copied!

ブラー時の値のクランプを無効にする

デフォルトでは、ユーザーの自由な数値入力を受け付けますが、minまたはmaxを超える数値は、ブラー時に自動的に調整されます。この自動的に調整される動作を無効にする場合は、clampValueOnBlurをfalseに設定します。

編集可能な例

<NumberInput defaultValue={15} max={30} clampValueOnBlur={false} />
Copied!

範囲外の値を許可する

シナリオによっては、範囲外の値をブロックしたくない場合があります。その場合は、keepWithinRangeをfalseに設定します。

編集可能な例

<NumberInput
  defaultValue={15}
  max={30}
  keepWithinRange={false}
  clampValueOnBlur={false}
/>
Copied!

無効化する

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

編集可能な例

<VStack>
  <NumberInput isDisabled variant="outline" placeholder="outline" />
  <NumberInput isDisabled variant="filled" placeholder="filled" />
  <NumberInput isDisabled variant="flushed" placeholder="flushed" />
  <NumberInput isDisabled variant="unstyled" placeholder="unstyled" />

  <FormControl
    isDisabled
    label="Order quantity"
    helperMessage="Please enter the quantity you wish to order."
  >
    <NumberInput />
  </FormControl>
</VStack>
Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <NumberInput isReadOnly variant="outline" placeholder="outline" />
  <NumberInput isReadOnly variant="filled" placeholder="filled" />
  <NumberInput isReadOnly variant="flushed" placeholder="flushed" />
  <NumberInput isReadOnly variant="unstyled" placeholder="unstyled" />

  <FormControl
    isReadOnly
    label="Order quantity"
    helperMessage="Please enter the quantity you wish to order."
  >
    <NumberInput />
  </FormControl>
</VStack>
Copied!

無効な入力にする

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

編集可能な例

<VStack>
  <NumberInput isInvalid variant="outline" placeholder="outline" />
  <NumberInput isInvalid variant="filled" placeholder="filled" />
  <NumberInput isInvalid variant="flushed" placeholder="flushed" />
  <NumberInput isInvalid variant="unstyled" placeholder="unstyled" />

  <FormControl
    isInvalid
    label="Order quantity"
    errorMessage="Order quantity is required."
  >
    <NumberInput />
  </FormControl>
</VStack>
Copied!

ステッパーをカスタマイズする

ステッパーをカスタマイズする場合は、incrementPropsまたはdecrementPropsにpropsを設定します。

編集可能な例

<NumberInput
  incrementProps={{ px: "xs", children: "+" }}
  decrementProps={{ px: "xs", children: "-" }}
/>
Copied!

カスタムコンポーネントを使用する

カスタムコンポーネントを使用する場合は、useNumberInputを使用します。

編集可能な例

const { getInputProps, getIncrementProps, getDecrementProps } = useNumberInput({
  step: 0.01,
  defaultValue: 3.14,
  min: 3,
  max: 4,
  precision: 2,
})

return (
  <HStack maxW="xs" gap="sm">
    <IconButton icon={<PlusIcon fontSize="2xl" />} {...getIncrementProps()} />
    <Input {...getInputProps()} />
    <IconButton icon={<MinusIcon fontSize="2xl" />} {...getDecrementProps()} />
  </HStack>
)
Copied!

React Hook Formを使う

編集可能な例

type Data = { numberInput: string }

const {
  control,
  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.numberInput}
      label="Age"
      errorMessage={errors.numberInput ? errors.numberInput.message : undefined}
    >
      <Controller
        name="numberInput"
        control={control}
        rules={{
          required: { value: true, message: "This is required." },
          max: { value: 5, message: "The maximum value is 5." },
        }}
        render={({ field }) => <NumberInput {...field} />}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

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

前Input次PasswordInput