Checkbox

The Checkbox component is a UI element that allows users to select one or more options from a set. It consists of a small square box and a label. When selected, a checkmark appears inside the box.
Checkboxes are commonly used in forms, settings, and surveys to enable users to make binary choices.

Live code

Example

Copy code

Open Sandbox

Reset demo

Storybook

Storybook failed to load. Please connect to the VPN to access.

Usage

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
                                                  id="checkbox-advanced"
                                                  isChecked
                                                  isRequired
                                                  name="checkboxAdvanced"
                                                  validationText="validation text"
                                                  validationState="danger"
                                                  helperText="Helper text"
                                                />

API

Name	Type	Default	Required	Description
autoComplete	string	-	✕	Automated assistance in filling
helperText	string	—	✕	Custom helper text
id	string	-	✓	Input and label identification
isDisabled	boolean	-	✕	Whether is field disabled
isChecked	boolean	-	✕	Whether is field checked
isItem	boolean	-	✕	To render in Item mode
isLabelHidden	boolean	-	✕	Whether is label hidden
isRequired	boolean	-	✕	Whether is field required
label	string	-	✕	Label text
name	string	-	✕	Input name
ref	ForwardedRef<HTMLInputElement>	-	✕	Input element reference
validationState	Validation dictionary	-	✕	Type of validation state.
validationText	string, string[]	-	✕	Validation text
value	string	-	✕	Input value

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 { classProps, props: modifiedProps } = useCheckboxStyleProps(props);
                                                
                                                  return (
                                                    <label htmlFor={props.id} className={classProps.root}>
                                                      <input {...modifiedProps} className={classProps.input} />
                                                      <span className={styleProps.text}>
                                                        <span className={styleProps.label}>{props.label}</span>
                                                        <span className={styleProps.helperText}>{props.helperText}</span>
                                                        <span className={styleProps.validationText}>{props.validationText}</span>
                                                      </span>
                                                    </label>
                                                  );
                                                };

For detailed information see Checkbox component