Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Checkbox

Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するための使用されるコンポーネントです。

ソース@yamada-ui/checkbox

インポート

import { Checkbox, CheckboxGroup } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<Checkbox>孫悟空</Checkbox>
Copied!

サイズを変更する

編集可能な例

<Wrap gap="md">
  <Checkbox size="sm">孫悟空</Checkbox>
  <Checkbox size="md">ベジータ</Checkbox>
  <Checkbox size="lg">フリーザ</Checkbox>
</Wrap>
Copied!

カラースキーマを変更する

編集可能な例

<Wrap gap="md">
  <Checkbox colorScheme="secondary" defaultIsChecked>
    Secondary
  </Checkbox>
  <Checkbox colorScheme="green" defaultIsChecked>
    Green
  </Checkbox>
</Wrap>
Copied!

デフォルトで選択された状態にする

デフォルトでチェックされた状態にする場合は、defaultIsCheckedをtrueに設定します。

編集可能な例

<Checkbox defaultIsChecked>孫悟空</Checkbox>
Copied!

無効化する

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

編集可能な例

<VStack>
  <Checkbox isDisabled>All Notifications</Checkbox>
  <Checkbox isDisabled defaultIsChecked>
    All Notifications
  </Checkbox>

  <CheckboxGroup defaultValue={["all"]}>
    <Checkbox value="all">All Notifications</Checkbox>
    <Checkbox value="important" isDisabled>
      Important Notifications
    </Checkbox>
    <Checkbox value="service">Service Notifications</Checkbox>
  </CheckboxGroup>

  <FormControl
    isDisabled
    label="Which notifications would you like to receive?"
  >
    <Checkbox defaultIsChecked>All Notifications</Checkbox>
  </FormControl>

  <FormControl
    isDisabled
    label="Which notifications would you like to receive?"
  >
    <CheckboxGroup defaultValue={["all"]}>
      <Checkbox value="all">All Notifications</Checkbox>
      <Checkbox value="important">Important Notifications</Checkbox>
      <Checkbox value="service">Service Notifications</Checkbox>
    </CheckboxGroup>
  </FormControl>
</VStack>
Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <Checkbox isReadOnly>All Notifications</Checkbox>
  <Checkbox isReadOnly defaultIsChecked>
    All Notifications
  </Checkbox>

  <CheckboxGroup defaultValue={["all"]}>
    <Checkbox value="all">All Notifications</Checkbox>
    <Checkbox value="important" isReadOnly>
      Important Notifications
    </Checkbox>
    <Checkbox value="service">Service Notifications</Checkbox>
  </CheckboxGroup>

  <FormControl
    isReadOnly
    label="Which notifications would you like to receive?"
  >
    <Checkbox defaultIsChecked>All Notifications</Checkbox>
  </FormControl>

  <FormControl
    isReadOnly
    label="Which notifications would you like to receive?"
  >
    <CheckboxGroup defaultValue={["all"]}>
      <Checkbox value="all">All Notifications</Checkbox>
      <Checkbox value="important">Important Notifications</Checkbox>
      <Checkbox value="service">Service Notifications</Checkbox>
    </CheckboxGroup>
  </FormControl>
</VStack>
Copied!

無効な入力にする

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

編集可能な例

<VStack>
  <Checkbox isInvalid>All Notifications</Checkbox>
  <Checkbox isInvalid defaultIsChecked>
    All Notifications
  </Checkbox>

  <CheckboxGroup defaultValue={["all"]}>
    <Checkbox value="all">All Notifications</Checkbox>
    <Checkbox value="important" isInvalid>
      Important Notifications
    </Checkbox>
    <Checkbox value="service">Service Notifications</Checkbox>
  </CheckboxGroup>

  <FormControl
    isInvalid
    label="Which notifications would you like to receive?"
    errorMessage="This is required."
  >
    <Checkbox>All Notifications</Checkbox>
  </FormControl>

  <FormControl
    isInvalid
    label="Which notifications would you like to receive?"
    errorMessage="This is required."
  >
    <CheckboxGroup defaultValue={["all"]}>
      <Checkbox value="all">All Notifications</Checkbox>
      <Checkbox value="important">Important Notifications</Checkbox>
      <Checkbox value="service">Service Notifications</Checkbox>
    </CheckboxGroup>
  </FormControl>
</VStack>
Copied!

中間状態にする

中間状態(indeterminate)にする場合は、isIndeterminateをtrueに設定します。

編集可能な例

const [values, setValues] = useState([false, false])

const allChecked = values.every(Boolean)
const isIndeterminate = values.some(Boolean) && !allChecked

return (
  <VStack gap="sm">
    <Checkbox
      isChecked={allChecked}
      isIndeterminate={isIndeterminate}
      onChange={(e) => setValues([e.target.checked, e.target.checked])}
    >
      地球人
    </Checkbox>

    <VStack pl="md" gap="sm">
      <Checkbox
        isChecked={values[0]}
        onChange={(e) => setValues([e.target.checked, values[1]])}
      >
        孫悟空
      </Checkbox>

      <Checkbox
        isChecked={values[1]}
        onChange={(e) => setValues([values[0], e.target.checked])}
      >
        孫悟飯
      </Checkbox>
    </VStack>
  </VStack>
)
Copied!

グループ化する

グループ化する場合は、CheckboxGroupを使用します。CheckboxGroupにitemsを設定することで、Checkboxを省略することができます。

編集可能な例

const items: CheckboxItem[] = [
  { label: "孫悟空", value: "孫悟空" },
  { label: "ベジータ", value: "ベジータ" },
  { label: "フリーザ", value: "フリーザ" },
]

return (
  <VStack>
    <CheckboxGroup defaultValue={["孫悟空", "ベジータ"]}>
      <Checkbox value="孫悟空">孫悟空</Checkbox>
      <Checkbox value="ベジータ">ベジータ</Checkbox>
      <Checkbox value="フリーザ">フリーザ</Checkbox>
    </CheckboxGroup>

    <CheckboxGroup direction="row" defaultValue={["孫悟空", "ベジータ"]}>
      <Checkbox value="孫悟空">孫悟空</Checkbox>
      <Checkbox value="ベジータ">ベジータ</Checkbox>
      <Checkbox value="フリーザ">フリーザ</Checkbox>
    </CheckboxGroup>

    <CheckboxGroup defaultValue={["孫悟空", "ベジータ"]} items={items} />
  </VStack>
)
Copied!

制御する

編集可能な例

const [isChecked, { toggle }] = useBoolean(false)

return (
  <Checkbox isChecked={isChecked} onChange={toggle}>
    孫悟空
  </Checkbox>
)
Copied!

カスタムフックを使用する

useCheckboxやuseCheckboxGroupなどのカスタムフックを使用して、カスタマイズしたチェックボックスを作成できます。

編集可能な例

const CustomCheckbox: FC<
  ReturnType<UseCheckboxGroupReturn["getCheckboxProps"]>
> = (props) => {
  const { getInputProps, getIconProps } = useCheckbox(props)

  return (
    <Box as="label">
      <ui.input {...getInputProps()} />

      <Box
        {...getIconProps()}
        cursor="pointer"
        borderWidth="1px"
        py="xs"
        px="sm"
        rounded="md"
        _checked={{
          bg: "blue.500",
          color: "white",
          borderColor: "blue.500",
        }}
      >
        {props.value}
      </Box>
    </Box>
  )
}

const { getCheckboxProps } = useCheckboxGroup<string>({
  defaultValue: ["孫悟空"],
})

return (
  <HStack gap="sm">
    <CustomCheckbox {...getCheckboxProps({ value: "孫悟空" })} />
    <CustomCheckbox {...getCheckboxProps({ value: "ベジータ" })} />
    <CustomCheckbox {...getCheckboxProps({ value: "フリーザ" })} />
  </HStack>
)
Copied!

React Hook Formを使う

編集可能な例

type Data = { checkbox: boolean; checkboxGroup: string[] }

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const onSubmit = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.checkbox}
      label="Who is your favorite character?"
      errorMessage={errors.checkbox ? errors.checkbox.message : undefined}
    >
      <Controller
        name="checkbox"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field: { value, ...rest } }) => (
          <Checkbox isChecked={value} {...rest}>
            孫悟空
          </Checkbox>
        )}
      />
    </FormControl>

    <FormControl
      isInvalid={!!errors.checkboxGroup}
      label="Who is your favorite character?"
      errorMessage={
        errors.checkboxGroup ? errors.checkboxGroup.message : undefined
      }
    >
      <Controller
        name="checkboxGroup"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <CheckboxGroup {...field}>
            <Checkbox value="孫悟空">孫悟空</Checkbox>
            <Checkbox value="ベジータ">ベジータ</Checkbox>
            <Checkbox value="フリーザ">フリーザ</Checkbox>
          </CheckboxGroup>
        )}
      />
    </FormControl>

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

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

前RadioCard次CheckboxCard