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	A11y	Description
align	"left" | "right" | undefined	'left'		The side the checkboxes in the group will be aligned to
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | 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	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
value	string[] | undefined			Array that holds the checkbox value when the isChecked prop set to true

CheckboxGroup.SelectAll Props

Extends Checkbox props.

Name	Type	A11y	Description
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | 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-checkbox	Select All checkbox element
abyss-checkbox-group-select-all-root	Select All checkbox root element
abyss-checkbox-label	Checkbox label.
abyss-checkbox-label-container	Checkbox label container.