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

align

isDisabled

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

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

Name	Type	Default	Required	Description
align	'left' | 'right' | undefined	'left'	-	The side the checkboxes in the group will be aligned to
children	React.ReactNode | undefined	-	-	The contents of the checkbox group component
hideLabel	boolean | undefined	false	-	Flag to hide label
isDisabled	boolean | undefined	false	-	Flag to enable/disable the checkboxes. If true, all checkboxes will be disabled
model	never | string | undefined	-	-	model is only used when the input is bound to a form via useForm. Model name used to bind the input to the form state. Only used inside a FormProvider.
onChange	(value: string[]) => void | undefined	-	-	Callback fired every time the value changes
validations	Validations | undefined	-	-	Set rules for the input to be valid. Valid in both useState and useForm modes. Set rules for the input to be valid.
value	string[] | undefined	-	-	Array that holds the checkbox value when the isChecked prop set to true

CheckboxGroup.SelectAll Props

Extends Checkbox props.

Name	Type	Default	Required	Description
children	React.ReactNode | undefined	-	-	Set the children of the select all
label	string | undefined	-	-	Label for the select all checkbox

CheckboxGroup.SelectAll Classes

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