Skip to main content

Checkbox

Used to mark an option as true/checked or false/not checked.

github
View source code
figma
View design
import { Checkbox } from '@uhg-abyss/mobile';
    () => {
      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.

    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
    		DefaultA11yDescription
    align
    "left" | "right" | undefined
    'left'
    The side the checkbox should be aligned to
    children
    string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | 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
    "medium" | "regular" | undefined
    'regular'
    Weight of the label text
    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: boolean) => void) | undefined
    Callback fired every time the value changes
    value
    string | undefined
    Value of the checkbox

    Checkbox Classes​

    Class NameDescription
    abyss-checkboxCheckbox element
    abyss-checkbox-error-containerCheckbox error container element
    abyss-checkbox-error-iconError icon element
    abyss-checkbox-error-labelText element in the error container
    abyss-checkbox-help-textText element below the label
    abyss-checkbox-labelLabel element
    abyss-checkbox-label-containerLabel container
    abyss-checkbox-rootCheckbox root element

    Dynamic Type​

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

    Checkbox Tokens​

    Token NameValue
    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
    Table of Contents