Checkbox

Displays our custom checkbox input implementation.

Props

Name	Type	Required	Default	Description
id	string	Yes	-	The id of the checkbox
children	React.ReactNode	Yes	-	The label of the checkbox
checked	boolean	No	-	The checked state of the checkbox
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	No	-	The change event handler of the checkbox

Examples

Standalone

Result

Loading...

Live Editor

function ExampleStandalone() {
    const [ checked, setChecked ] = React.useState(false);
    return (
        <Checkbox
            id="checkbox-standalone-001"
            checked={checked}
            onChange={() => setChecked(!checked)}
        >
            Your Label
        </Checkbox>
    )
}

Form element with one checkbox

Result

Loading...

Live Editor

function ExampleFormElementOneCheckbox() {
    const [ values, setValues ] = React.useState({
        'option_001': false
    });
    const setValue = (name, value) => setValues({
        ...values,
        [name]: value
    });
    return (
        <FormElement
            label="Form element with one checkbox"
            component="fieldset"
            labelComponent="legend"
        >
            <Checkbox
                id="checkbox-form-element-single-001"
                checked={values['option_001']}
                onChange={() => setValue('option_001', !values['option_001'])}
            >
                Checkbox 1
            </Checkbox>
        </FormElement>
    );
}

Form element with multiple checkboxes

Result

Loading...

Live Editor

function ExampleFormElementMultipleCheckboxes() {
    const [ values, setValues ] = React.useState({
        'option_001': false,
        'option_002': true
    });
    const setValue = (name, value) => setValues({
        ...values,
        [name]: value
    });
    return (
        <FormElement
            label="Form element with multiple checkboxes"
            component="fieldset"
            labelComponent="legend"
        >
            <Checkbox
                id="checkbox-form-element-multiple-001"
                checked={values['option_001']}
                onChange={() => setValue('option_001', !values['option_001'])}
            >
                Checkbox 1
            </Checkbox>
            <Checkbox
                id="checkbox-form-element-multiple-002"
                checked={values['option_002']}
                onChange={() => setValue('option_002', !values['option_002'])}
            >
                Checkbox 2
            </Checkbox>
        </FormElement>
    );
}

Form element with error

Result

Loading...

Live Editor

function ExampleFormElementError() {
    const [ values, setValues ] = React.useState({
        'option_001': false
    });
    const setValue = (name, value) => setValues({
        ...values,
        [name]: value
    });
    return (
        <FormElement
            label="Form element with one checkbox"
            hasError
            component="fieldset"
            labelComponent="legend"
        >
            <Checkbox
                id="checkbox-form-element-error-001"
                checked={values['option_001']}
                onChange={() => setValue('option_001', !values['option_001'])}
            >
                Checkbox 1
            </Checkbox>
        </FormElement>
    );
}