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

label

align

isDisabled

isIndeterminate

() => {
  const [isChecked, setChecked] = useState(true);

  return (
    <Checkbox
      label="I agree"
      isChecked={isChecked}
      onChange={setChecked}
    />
  );
};

States

• Default - The default checkbox is unchecked.
• Checked - Use the isChecked prop to mark a checkbox as checked.
• Indeterminate - Use the isIndeterminate prop to set the checkbox as indeterminate.
• Disabled - Use the isDisabled prop to disable a checkbox. A disabled checkbox is unusable and un-clickable.
• Help Text - Use the helpText prop to insert helpful text below the checkbox.
• Error Message - Use the errorMessage prop to display a custom error message below the checkbox.

useForm (Recommended)

Using the useForm hook allows you to easily manage form state and validation.

useState

Using the useState hook gets values from the component state.

Align

The align prop determines which side the checkbox is on. 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.

Checkbox Props

Prop Name	Type	Default	Description
align	"left" | "right	left	The side the checkbox should be aligned to
children	node	-	The contents of the checkbox component
errorMessage	string	-	Set the error message displayed below the checkbox
helpText	string	-	Set the subtext displayed below the checkbox
hideLabel	boolean	false	Flag to hide label
isChecked	boolean	false	Flag to turn checkbox on or off
isDisabled	boolean	false	Flag to enable/disable the checkbox. If true, the checkbox will be disabled
isIndeterminate	boolean	false	Set the checkbox to indeterminate or not
label	string	-	Label of the checkbox
onChange	function	-	Callback fired every time the value changes
value	string	-	Value of the checkbox

Checkbox Classes

Class Name	Description
abyss-checkbox	Checkbox element
abyss-checkbox-error-container	Checkbox error container element
abyss-checkbox-error-icon	Error icon element
abyss-checkbox-error-label	Text element in the error container
abyss-checkbox-help-text	Text element below the label
abyss-checkbox-label	Label element
abyss-checkbox-label-container	Label container
abyss-checkbox-root	Checkbox root element

Dynamic Type

The checkbox icon scales up to 3XL, while any text passed in scales according to Abyss dynamic type standards.

Search tokens

Checkbox Tokens

Token Name	Value
checkbox.color.icon	#FFFFFF
checkbox.color.surface.container.enabled.default	#FFFFFF
checkbox.color.surface.container.enabled.selected	#196ECF
checkbox.color.surface.container.disabled.default	#CBCCCD
checkbox.color.surface.container.disabled.selected	#929496
checkbox.color.border.container.enabled.default	#929496
checkbox.color.border.container.disabled.default	#929496
checkbox.border-radius.all.container	4
checkbox.border-width.all.container	2
checkbox.sizing.all.container	20
checkbox.sizing.all.icon	20