Checkbox

import { Checkbox } from '@concur/nui-widgets';

Checkbox is a specialized form control that emits an <input> with a type of checkbox.

Examples

States

Different states of a checkbox can be set using the checked, disabled and indeterminate properties.

<Checkbox
    label='Standard Example' />
<Checkbox
    checked={checkStateRender[0]}
    disabled
    label='Disabled Example' />
<Checkbox
    checked={checkStateRender[1]}
    indeterminate
    label='Indeterminate Example'
    onChange={(value) => {
        checkStateRender[1] = value;
        this.setState({
            checkState: checkStateRender
        });
    }} />

Inline

Inline checkboxes will be shown on the same horizontal row rather than stacked. Use the inline property for this option.

<Checkbox
    inline
    label='Standard Example' />
<Checkbox
    checked={checkStateRender[0]}
    disabled
    inline
    label='Disabled Example' />
<Checkbox
    checked={checkStateRender[1]}
    indeterminate
    inline
    label='Indeterminate Example'
    onChange={(value) => {
        checkStateRender[1] = value;
        this.setState({
            checkState: checkStateRender
        });
    }} />

Required

Use the required property to mark checkboxes as required. Labels will display a visual indication while input controls will have a required attribute added to help with assistive technologies.

<Checkbox
    label='Example'
    required />

Validation States

The validation tooltip will be triggered when hovering over the icon next to the checkbox. Use the validationMessage property to set a validation state.

<Checkbox
    label='Option #1'
    validationMessage={{ state: 'warning', text: 'Validation warning message' }} />
<Checkbox
    label='Option #2'
    validationMessage={{ state: 'error', text: 'Validation error message' }} />

Usage

Properties

Property Type Default Description
label String Required Text label for checkbox input.
checked Boolean false When true, the checkbox renders as “checked”.
className String   Any custom classes to add to the <label> element.
disabled Boolean false When true, the checkbox gets the disabled attribute.
hiddenLabel Boolean false When true, the label will not be shown. It will still be present with a screen-reader-only class which allows it to be read to assistive technologies.
indeterminate Boolean false When true, the checkbox renders a “mixed” state (shows as a “-“ in the checkbox).
inline Boolean false When true, checkboxes will be shown on the same row rather than stacked.
required Boolean false Adds the required attribute to the <input> element. NOTE: This does not perform any validation, but rather just marks the field as required.
validationMessage Object   An object identifying a validation message. The object will include properties for state and text; e.g., { state: 'warning', text: 'This is your last warning' }. The options for state are 'error' and 'warning'. text is the message shown in the validation tooltip; as with all text, it must be localized.

Callbacks

Property Parameters Description
onChange event Callback function for onChange events.