import { CheckboxGroup } from '@uhg-abyss/mobile';

align

isDisabled

() => {
  const [value, setValue] = useState([]);

  const handlePress = () => {
    console.log(value);
  };
  return (
    <Layout.Stack grow>
      <CheckboxGroup align="left" value={value} onChange={(value) => setValue(value)}>
        <CheckboxGroup.SelectAll  label='Select All'/>
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
        <Checkbox label="Option 4" value="four" />
        <Checkbox label="Option 5" value="five" />
      </CheckboxGroup>
      <Button size='small' onPress={handlePress}>Submit</Button>
    </Layout.Stack>
  );
};

useForm (Recommended)

Using the useForm hook allows you to manage the state of the checkbox group more effectively, especially when dealing with forms.

useState

Using the useState hook gets values from the component state.

Value

Checkboxes within a CheckboxGroup component require the value prop to be specified in order to function as part of the checkbox group.

Select All

Use the CheckboxGroup.SelectAll component to control the checked state for the entire group.

Disabled

Use the isDisabled prop to disable the entire group.

Align

The align prop determines which side the checkbox is on for the entire group. The options are left or right. When the align prop is set to right, the label stays on the left and only the checkbox is set to the rightmost edge of it's container. The default is left.

Multi Select Card

A child component can be used instead of a traditional checkbox label. The label prop is removed and a component is added as a child of each checkbox.

See Card for more details on the Card used below.

CheckboxGroup Props

Prop Name	Type	Default	Description
align	"left" | "right	-	The side the checkboxes in the group will be aligned to
children	node	-	The contents of the checkbox group component
hideLabel	boolean	false	Flag to hide label
isDisabled	boolean	false	Flag to enable/disable the checkboxes. If true, all checkboxes will be disabled
onChange	function	-	Callback fired every time the value changes
value	array	-	Array that holds the checkbox value when the isChecked prop set to true

CheckboxGroup.SelectAll Props

Extends Abyss - Checkbox Props

Prop Name	Type	Default	Description
children	node	-	The contents of the SelectAll component
label	string	Select All	Label of the SelectAll checkbox

CheckboxGroup.SelectAll Classes

Extends Abyss - Checkbox Classes

Class Name	Description
abyss-checkbox-group-select-all-checkbox	Select All checkbox element
abyss-checkbox-group-select-all-root	Select All checkbox root element