CheckboxGroup

Group of checkboxes with shared state management.

CheckboxGroup

CheckboxGroup is a component for managing a group of related checkboxes.

Import

import { CheckboxGroup } from 'radix-native-ui';

Usage

import { CheckboxGroup } from 'radix-native-ui';

<CheckboxGroup
  value={selected}
  onValueChange={setSelected}
>
  <Checkbox value="apple">Apple</Checkbox>
  <Checkbox value="banana">Banana</Checkbox>
  <Checkbox value="orange">Orange</Checkbox>
</CheckboxGroup>

Props

Examples

Basic Group

const [selected, setSelected] = useState(['apple']);

<CheckboxGroup value={selected} onValueChange={setSelected}>
  <Checkbox value="apple">Apple</Checkbox>
  <Checkbox value="banana">Banana</Checkbox>
  <Checkbox value="orange">Orange</Checkbox>
</CheckboxGroup>

With Label

<Flex direction="column" gap={2}>
  <Text weight="medium">Select fruits:</Text>
  <CheckboxGroup value={selected} onValueChange={setSelected}>
    <Checkbox value="apple">Apple</Checkbox>
    <Checkbox value="banana">Banana</Checkbox>
    <Checkbox value="orange">Orange</Checkbox>
  </CheckboxGroup>
</Flex>

Disabled Group

<CheckboxGroup disabled value={selected} onValueChange={setSelected}>
  <Checkbox value="1">Option 1</Checkbox>
  <Checkbox value="2">Option 2</Checkbox>
</CheckboxGroup>

With Color

<CheckboxGroup color="green" value={selected} onValueChange={setSelected}>
  <Checkbox value="1">Option 1</Checkbox>
  <Checkbox value="2">Option 2</Checkbox>
</CheckboxGroup>

Related

• Checkbox - Individual checkbox
• CheckboxCards - Card-style checkboxes
• RadioGroup - Radio button group