Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Checkbox

Checkbox is a component used for allowing users to select multiple values from multiple options.

Source@yamada-ui/checkbox

Import

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

Usage

Editable example

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

Change Size

Editable example

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

Change Color Scheme

Editable example

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

Set as Default Checked

To set the checkbox as checked by default, set defaultIsChecked to true.

Editable example

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

Disable

To disable the checkbox, set isDisabled to true.

Editable example

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

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

  <Fieldset isDisabled legend="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>
  </Fieldset>
</VStack>
Copied!

Set as Read-Only

To make the checkbox read-only, set isReadOnly to true.

Editable example

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

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

  <Fieldset isReadOnly legend="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>
  </Fieldset>
</VStack>
Copied!

Set as Invalid Input

To set the checkbox as an invalid input, set isInvalid to true.

Editable example

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

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

  <Fieldset
    isInvalid
    legend="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>
  </Fieldset>
</VStack>
Copied!

Set as Indeterminate

To set the checkbox to an indeterminate state, set isIndeterminate to true.

Editable example

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!

Grouping

To group checkboxes, use CheckboxGroup. By setting items in CheckboxGroup, you can omit individual Checkbox components.

Editable example

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!

Control

Editable example

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

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

Use Custom Hooks

You can create customized checkboxes using custom hooks like useCheckbox or useCheckboxGroup.

Editable example

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!

Use React Hook Form

Editable example

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)}>
    <Fieldset
      isInvalid={!!errors.checkbox}
      legend="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>
        )}
      />
    </Fieldset>

    <Fieldset
      isInvalid={!!errors.checkboxGroup}
      legend="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>
        )}
      />
    </Fieldset>

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

Edit this page on GitHub

PreviousRadioCardNextCheckboxCard