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 its container. The default is left.

Checkbox Props

Name	Type	Default	Required	Description
align	'left' | 'right' | undefined	'left'	-	The side the checkbox should be aligned to
children	React.ReactNode | undefined	-	-	The contents of the checkbox component
errorMessage	string | undefined	-	-	Set the error message displayed below the checkbox
helpText	string | undefined	-	-	Set the subtext displayed below the checkbox
hideLabel	boolean | undefined	false	-	Flag to hide label
isChecked	boolean | undefined	false	-	Flag to turn checkbox on or off
isDisabled	boolean | undefined	false	-	Flag to enable/disable the checkbox. If true, the checkbox will be disabled
isIndeterminate	boolean | undefined	false	-	Set the checkbox to indeterminate or not
label	string | undefined	-	-	Label of the checkbox
labelWeight	'regular' | 'medium' | undefined	'regular'	-	Weight of the label text
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: boolean) => 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	-	-	Value of the checkbox

Checkbox Classes

Class Name	Description
abyss-checkbox-root	Checkbox root element
abyss-checkbox	Checkbox element
abyss-checkbox-help-text	Text element below the label
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-label	Label element
abyss-checkbox-label-container	Label container

Dynamic Type

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

Checkbox Tokens

Search 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