Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Checkbox

A checkbox allows the user to toggle between 2 or 3 (indeterminate) choices.

usage: import { Checkbox, CheckboxGroup } from "@sharegate/orbit-ui";
wai-aria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox
sources: Github

Usage

Default

A default checkbox.

Milky Way

Editable example

<Checkbox>Milky Way</Checkbox><Checkbox>Milky Way</Checkbox>

No label

A checkbox can be rendered without a label.

Editable example

<Checkbox aria-label="Milky Way" /><Checkbox aria-label="Milky Way" />

Checked

A checkbox can be checked.

Milky Way

Editable example

<Checkbox defaultChecked>Milky Way</Checkbox><Checkbox defaultChecked>Milky Way</Checkbox>

Indeterminate

A checkbox can be indeterminate.

Milky Way

Editable example

<Checkbox defaultIndeterminate>Milky Way</Checkbox><Checkbox defaultIndeterminate>Milky Way</Checkbox>

Disabled

A checkbox can be disabled.

Milky Way

Editable example

<Checkbox disabled>Milky Way</Checkbox><Checkbox disabled>Milky Way</Checkbox>

Icon

A checkbox can have icons after his label.

Milky Way

Editable example

<Checkbox>
    <Text>Milky Way</Text>
    <PlaceholderMajorIcon />
</Checkbox><Checkbox>
    <Text>Milky Way</Text>
    <PlaceholderMajorIcon />
</Checkbox>

Counter

A checkbox can have a counter after his label.

Andromeda6

Editable example

<Checkbox>
    <Text>Andromeda</Text>
    <Counter>6</Counter>
</Checkbox><Checkbox>
    <Text>Andromeda</Text>
    <Counter>6</Counter>
</Checkbox>

Size

A checkbox can vary in size.

Milky WayMilky Way

Editable example

<Inline alignY="center">
    <Checkbox size="sm">Milky Way</Checkbox>
    <Checkbox>Milky Way</Checkbox>
</Inline><Inline alignY="center">
    <Checkbox size="sm">Milky Way</Checkbox>
    <Checkbox>Milky Way</Checkbox>
</Inline>

Reverse

A checkbox checkmark can be to the left or to the right of his label.

Milky Way6

Editable example

<Checkbox reverse>
    <Text>Milky Way</Text>
    <PlaceholderMajorIcon />
    <Counter variant="divider">6</Counter>
</Checkbox><Checkbox reverse>
    <Text>Milky Way</Text>
    <PlaceholderMajorIcon />
    <Counter variant="divider">6</Counter>
</Checkbox>

Validation

A checkbox can display a validation state to communicate to the user whether the current value is valid or invalid.

Implement your own validation logic in your app and pass either "valid" or "invalid" to the input via the validationState prop.

The example below illustrates how one would validate if the user has checked the checkbox.

Milky Way

Editable example

() => {
    const [isChecked, setIsChecked] = useState(false);

    const isValid = isChecked;

    const handleChange = useCallback(() => {
        setIsChecked(x => !x);
        console.log(!isChecked);
    }, [isChecked, setIsChecked]);

    return (
        <Checkbox
            validationState={isValid ? "valid" : "invalid"}
            checked={isChecked}
            onChange={handleChange}
        >
            Milky Way
        </Checkbox>
    );
};() => {
    const [isChecked, setIsChecked] = useState(false);

    const isValid = isChecked;

    const handleChange = useCallback(() => {
        setIsChecked(x => !x);
        console.log(!isChecked);
    }, [isChecked, setIsChecked]);

    return (
        <Checkbox
            validationState={isValid ? "valid" : "invalid"}
            checked={isChecked}
            onChange={handleChange}
        >
            Milky Way
        </Checkbox>
    );
};

Controlled

A checkbox can handle checked state in controlled mode.

Off

Editable example

() => {
    const [isChecked, setIsChecked] = useState(false);

    const handleChange = useCallback(() => {
        setIsChecked(x => !x);
        console.log(!isChecked);
    }, [isChecked, setIsChecked]);

    return (
        <Checkbox checked={isChecked} onChange={handleChange}>
            {isChecked ? "On" : "Off"}
        </Checkbox>
    );
};() => {
    const [isChecked, setIsChecked] = useState(false);

    const handleChange = useCallback(() => {
        setIsChecked(x => !x);
        console.log(!isChecked);
    }, [isChecked, setIsChecked]);

    return (
        <Checkbox checked={isChecked} onChange={handleChange}>
            {isChecked ? "On" : "Off"}
        </Checkbox>
    );
};

Checkbox group

Related checkboxes can be group together.

Milky WayAndromedaMedusa

Editable example

<CheckboxGroup>
    <Checkbox value="milky-way">Milky Way</Checkbox>
    <Checkbox value="andromeda">Andromeda</Checkbox>
    <Checkbox value="medusa">Medusa</Checkbox>
</CheckboxGroup><CheckboxGroup>
    <Checkbox value="milky-way">Milky Way</Checkbox>
    <Checkbox value="andromeda">Andromeda</Checkbox>
    <Checkbox value="medusa">Medusa</Checkbox>
</CheckboxGroup>

Orientation

A checkbox group can render his elements vertically.

Milky WayAndromedaMedusa

Editable example

<CheckboxGroup orientation="vertical">
    <Checkbox value="milky-way">Milky Way</Checkbox>
    <Checkbox value="andromeda">Andromeda</Checkbox>
    <Checkbox value="medusa">Medusa</Checkbox>
</CheckboxGroup><CheckboxGroup orientation="vertical">
    <Checkbox value="milky-way">Milky Way</Checkbox>
    <Checkbox value="andromeda">Andromeda</Checkbox>
    <Checkbox value="medusa">Medusa</Checkbox>
</CheckboxGroup>

Reverse

A checkbox group elements can be reversed.

Milky WayAndromedaMedusa

Editable example

<CheckboxGroup reverse>
    <Checkbox value="milky-way">Milky Way</Checkbox>
    <Checkbox value="andromeda">Andromeda</Checkbox>
    <Checkbox value="medusa">Medusa</Checkbox>
</CheckboxGroup><CheckboxGroup reverse>
    <Checkbox value="milky-way">Milky Way</Checkbox>
    <Checkbox value="andromeda">Andromeda</Checkbox>
    <Checkbox value="medusa">Medusa</Checkbox>
</CheckboxGroup>

Validation

A checkbox group can display a validation state to communicate to the user whether the current value is valid or invalid.

Implement your own validation logic in your app and pass either "valid" or "invalid" to the input via the validationState prop.

The example below illustrates how one would validate if the user has checked all the checkbox.

Milky WayAndromedaMedusa

Editable example

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

    const isValid = ["milky-way", "andromeda", "medusa"].every(x => value.includes(x));

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <CheckboxGroup
            validationState={isValid ? "valid" : "invalid"}
            value={value}
            onChange={handleChange}
        >
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
    );
};() => {
    const [value, setValue] = useState([]);

    const isValid = ["milky-way", "andromeda", "medusa"].every(x => value.includes(x));

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <CheckboxGroup
            validationState={isValid ? "valid" : "invalid"}
            value={value}
            onChange={handleChange}
        >
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
    );
};

Custom components

Any component implementing the CheckableContext can behave like a checkbox group. This is usually done by using the useCheckableProps hook.

Editable example

const TagButton = as(Tag, "button");

function CustomComponent({ value, children, ...rest }) {
    const [{ checked: isChecked, onCheck, ...checkableProps }] = useCheckableProps({ value });

    const handleCheck = useCallback(
        event => {
            onCheck(event, value);
        },
        [value, onCheck]
    );

    return (
        <TagButton
            {...rest}
            {...checkableProps}
            value={value}
            onClick={handleCheck}
            color={isChecked ? "white" : undefined}
            backgroundColor={isChecked ? "alias-accent" : "alias-warning-light"}
            aria-checked={isChecked}
        >
            {children}
        </TagButton>
    );
}

render(() => {
    return (
        <CheckboxGroup gap={2}>
            <CustomComponent value="milky-way">Milky Way</CustomComponent>
            <CustomComponent value="andromeda">Andromeda</CustomComponent>
            <CustomComponent value="medusa">Medusa</CustomComponent>
        </CheckboxGroup>
    );
});const TagButton = as(Tag, "button");

function CustomComponent({ value, children, ...rest }) {
    const [{ checked: isChecked, onCheck, ...checkableProps }] = useCheckableProps({ value });

    const handleCheck = useCallback(
        event => {
            onCheck(event, value);
        },
        [value, onCheck]
    );

    return (
        <TagButton
            {...rest}
            {...checkableProps}
            value={value}
            onClick={handleCheck}
            color={isChecked ? "white" : undefined}
            backgroundColor={isChecked ? "alias-accent" : "alias-warning-light"}
            aria-checked={isChecked}
        >
            {children}
        </TagButton>
    );
}

render(() => {
    return (
        <CheckboxGroup gap={2}>
            <CustomComponent value="milky-way">Milky Way</CustomComponent>
            <CustomComponent value="andromeda">Andromeda</CustomComponent>
            <CustomComponent value="medusa">Medusa</CustomComponent>
        </CheckboxGroup>
    );
});

Controlled

A checkbox group can handle value state in controlled mode.

Milky WayAndromedaMedusa

Editable example

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

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <CheckboxGroup value={value} onChange={handleChange}>
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
    );
};() => {
    const [value, setValue] = useState([]);

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <CheckboxGroup value={value} onChange={handleChange}>
            <Checkbox value="milky-way">Milky Way</Checkbox>
            <Checkbox value="andromeda">Andromeda</Checkbox>
            <Checkbox value="medusa">Medusa</Checkbox>
        </CheckboxGroup>
    );
};

API

Checkbox

usage: import { Checkbox } from "@sharegate/orbit-ui";
slots: "label", "icon", "counter"
extends: Label
StyleProps

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

checked

A controlled checked state value.

falsetrue

defaultChecked

The initial value of checked when uncontrolled.

falsetrue

defaultIndeterminate

The initial value of indeterminate.

falsetrue

indeterminate

A controlled indeterminate state value.

falsetrue

onChange

Called when the checkbox checked state change.

ChangeEventHandler<Element>

event React's original synthetic event.

onValueChange

Called when the checkbox checked state change.

(event: ChangeEvent<HTMLInputElement>, isChecked: boolean) => void

`event`	React's original synthetic event.
`isChecked`	Whether or not the input is checked.

required

Whether or not a user input is required before form submission.

falsetrue

reverse

Invert the order the checkmark box and the label.

falsetrue

size

A checkbox can vary in size.

"sm" | "md" | ResponsiveValue<"sm" | "md">

validationState

Whether or not the input should display as "valid" or "invalid".

"valid""invalid"

value

The value to associate with when in a group.

string

CheckboxGroup

usage: import { CheckboxGroup } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name Description Default

align

The alignment of the elements.

"center" | "end" | "start" | ResponsiveValue<FlexAlignment>

autoFocus

Whether or not the first input of the group should autoFocus on render.

numberfalsetrue

disabled

Whether or not the inputs of the group are disabled.

falsetrue

fluid

Whether the elements take up the width & height of their container.

false | true | ResponsiveValue<boolean>

inline

Whether or not the element generate line breaks before or after himself.

falsetrue

onChange

Called when an input of the group change.

(event: SyntheticEvent<Element, Event>, value: string[]) => void

`event`	React's original event.
`value`	The new value.

orientation

The orientation of the elements.

"horizontal" | "vertical" | ResponsiveValue<FlexOrientation>

required

Whether a user input is required before form submission.

falsetrue

reverse

Whether or not to reverse the order of the elements.

falsetrue

size

The checkbox of a group can vary in size.

"sm" | "md" | ResponsiveValue<"sm" | "md">

validationState

Whether the group should display as "valid" or "invalid".

"valid""invalid"

value

The value of the group.

string[]

wrap

Whether elements are forced onto one line or can wrap onto multiple rows.

false | true | ResponsiveValue<boolean>

No Preview

Checkbox

Usage

Default

No label

Checked

Indeterminate

Disabled

Icon

Counter

Size

Reverse

Validation

Controlled

Checkbox group

Orientation

Reverse

Validation

Custom components

Controlled

API

Checkbox

CheckboxGroup