Checkbox

Checkbox enables the user to check/uncheck choice. It has input, a label, and an optional helperText. It could be disabled or have a validation state. The label could be hidden and show if the input is required.

Basic example usage:

                                                
                                                <Checkbox id="checkbox-default" label="Label" name="checkboxDefault" />

Advanced example usage:

                                                
                                                <Checkbox
                                                  hasValidationIcon
                                                  id="checkbox-advanced"
                                                  isChecked
                                                  isRequired
                                                  name="checkboxAdvanced"
                                                  validationText="validation text"
                                                  validationState="danger"
                                                  helperText="Helper text"
                                                />

Input Position

The inputPosition prop allows you to position the input to the start (default) or end of the label:

                                                
                                                <Checkbox id="checkbox-start" label="Input at Start (default)" inputPosition="start" />
                                                <Checkbox id="checkbox-end" label="Input at End" inputPosition="end" />

Responsive Input Position

Pass an object to adjust the input position based on the breakpoint:

                                                
                                                <Checkbox
                                                  id="checkbox-responsive"
                                                  label="Responsive Input Position"
                                                  inputPosition={{ mobile: 'end', tablet: 'start' }}
                                                />

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Custom Component

Text field classes are fabricated using useCheckboxStyleProps hook. You can use it to create your own custom Checkbox component.

                                                
                                                const CustomCheckbox = (props: SpiritCheckboxProps): JSX.Element => {
                                                  const { id } = props;
                                                  const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);
                                                
                                                  const helperTextId = `${id}-helper-text`;
                                                  const validationTextId = `${id}-validation-text`;
                                                
                                                  return (
                                                    <div className={classProps.root}>
                                                      <input {...modifiedProps} id={id} className={classProps.input} aria-describedby={`${validationTextId} ${helperTextId}`} />
                                                      <div className={styleProps.text}>
                                                        <label className={styleProps.label} htmlFor={props.id}>{props.label}</label>
                                                        <div className={styleProps.helperText} id={helperTextId}>{props.helperText}</div>
                                                        <div className={styleProps.validationText} id={validationTextId}>{props.validationText}</div>
                                                      </div>
                                                    </div>
                                                  );
                                                };

For detailed information see Checkbox component