NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Checkbox

import Checkbox from '@concur/nui-widgets/lib/Forms/Checkbox';

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 and indeterminate properties.

<Checkbox
    label='Standard 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[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' }} />

Disabled State

Use the disabled property to disable a checkbox. A disabled element is unusable and un-clickable.

<Checkbox
    checked
    disabled
    label='Example 1' />
<Checkbox
    disabled
    label='Example 2' />

ReadOnly State

ReadOnly is not a supported state for the Checkbox component.

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.
labelClassName String   Classes to be added to the wrapping <label> tag.
labelProps Object   Other props to be spread onto the wrapping <label> tag.
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.
size String 'lg' Size of the <label> element. Options are 'lg', 'md', 'sm'.
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 checked (Boolean), event Callback function for onChange events.