 <CheckboxGroup.Root defaultValue={['1']}>
  <CheckboxGroup.Item value="1">Option 1</CheckboxGroup.Item>
  <CheckboxGroup.Item value="2">Option 2</CheckboxGroup.Item>
  <CheckboxGroup.Item value="3">Option 3</CheckboxGroup.Item>
</CheckboxGroup.Root>

Props

No props data available for CheckboxGroup.

Usage

Basic group

Use a checkbox group when needing to select multiple independent options from a list, choosing any combination including none, some, or all available options.

 <Flex direction="column" gap="2" maxWidth="400px">
  <Text size="2" weight="bold">
    Password rules
  </Text>

  <CheckboxGroup.Root defaultValue={['uppercase', 'lowercase']}>
    <CheckboxGroup.Item value="uppercase">
      At least one uppercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="lowercase">
      At least one lowercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="number">At least one number</CheckboxGroup.Item>
    <CheckboxGroup.Item value="special">
      At least one special character
    </CheckboxGroup.Item>
  </CheckboxGroup.Root>
</Flex>

With helper text

Add helper text to provide additional context about the checkbox group.

 <Flex direction="column" gap="2" maxWidth="400px">
  <Text size="2" weight="bold">
    Password rules
  </Text>

  <CheckboxGroup.Root defaultValue={['uppercase', 'number']}>
    <CheckboxGroup.Item value="uppercase">
      At least one uppercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="lowercase">
      At least one lowercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="number">At least one number</CheckboxGroup.Item>
    <CheckboxGroup.Item value="special">
      At least one special character
    </CheckboxGroup.Item>
  </CheckboxGroup.Root>

  <Text size="2" color="gray">
    Select which rules to enforce for new passwords.
  </Text>
</Flex>

With validation message

Display validation messages along with helper text to provide feedback and context.

 <Flex direction="column" gap="2" maxWidth="400px">
  <Text size="2" weight="bold">
    Password rules
  </Text>

  <CheckboxGroup.Root>
    <CheckboxGroup.Item value="uppercase">
      At least one uppercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="lowercase">
      At least one lowercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="number">At least one number</CheckboxGroup.Item>
    <CheckboxGroup.Item value="special">
      At least one special character
    </CheckboxGroup.Item>
  </CheckboxGroup.Root>

  <Text size="2" color="red">
    Please select at least one password rule.
  </Text>

  <Text size="2" color="gray">
    Select which rules to enforce for new passwords.
  </Text>
</Flex>

Size

Use the size prop to control the checkbox size.

 <Flex direction="column" gap="4">
  <CheckboxGroup.Root size="1" defaultValue={['1']}>
    <CheckboxGroup.Item value="1">Size 1</CheckboxGroup.Item>
    <CheckboxGroup.Item value="2">Size 1</CheckboxGroup.Item>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="2" defaultValue={['1']}>
    <CheckboxGroup.Item value="1">Size 2</CheckboxGroup.Item>
    <CheckboxGroup.Item value="2">Size 2</CheckboxGroup.Item>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="3" defaultValue={['1']}>
    <CheckboxGroup.Item value="1">Size 3</CheckboxGroup.Item>
    <CheckboxGroup.Item value="2">Size 3</CheckboxGroup.Item>
  </CheckboxGroup.Root>
</Flex>

Disabled

Use the native disabled attribute to create disabled checkboxes within a group.

 <Flex direction="column" gap="2" maxWidth="400px">
  <Text size="2" weight="bold">
    Password rules
  </Text>

  <CheckboxGroup.Root defaultValue={['uppercase', 'lowercase', 'number']}>
    <CheckboxGroup.Item value="uppercase">
      At least one uppercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="lowercase">
      At least one lowercase letter
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="number" disabled>
      At least one number (required)
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="special" disabled>
      At least one special character
    </CheckboxGroup.Item>
  </CheckboxGroup.Root>
</Flex>

Variants

Dashboard

1 variant found

CheckboxGroup in Edit User Role Dialogdashboard

Context

Usage

Used 2 times across 1 package

Dashboard

Where it's used

1 file

packages/dashboard/src/components/roles/edit-user-role-dialog.tsx2

Checkbox Group

On this page

Props

Usage

Basic group

With helper text

With validation message

Size

Disabled

Variants

Dashboard

Context

Usage Statistics

Usage

Where it's used