Checkbox

An input that lets users select one or more options from a limited number of choices. Each selection is independent (with some exceptions).

React

Is new design vision part implemented using new tokens?

Up to date

Usage

 


                                                                                                                                            
                                                                                                                                            
                                                                                                                                                import { CheckboxGroup } from '@optimus-web/core';
                                                                                                                                            
                                                                                                                                            const MyCheckboxGroupComponent = () => {
                                                                                                                                                const [groupValues, setGroupValues] = useState(values);
                                                                                                                                                const handleChange = (_event: React.SyntheticEvent<HTMLElement>, newValues: InputValue[]) => {
                                                                                                                                                    setGroupValues(newValues);
                                                                                                                                                };
                                                                                                                                            
                                                                                                                                                return <CheckboxGroup values={groupValues} onChange={handleChange} label='Fruits' options={[
                                                                                                                                                            { name: 'fruit', value: 'apple', label: 'Apple' },
                                                                                                                                                            { name: 'fruit', value: 'strawberry', label: 'Strawberry' },
                                                                                                                                                            { name: 'fruit', value: 'lemon', label: 'Lemon' },
                                                                                                                                                        ]}/>;
                                                                                                                                            };
                                                                                                                                            
                                                                                                                                                

                                                                                                                                            
                                                                                                                                            
                                                                                                                                                import { Checkbox } from '@optimus-web/core';
                                                                                                                                            
                                                                                                                                            const MyCheckboxComponent = () => {
                                                                                                                                                const [checked, setChecked] = useState<>(false);
                                                                                                                                            
                                                                                                                                                return <Checkbox checked={false} value="label" name="checkbox" onChange={(_, true) => setChecked(true)}/>
                                                                                                                                            }
                                                                                                                                            
                                                                                                                                            
                                                                                                                                                

Storybook

Open example in our Storybook

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

 

API

CheckboxGroup

Name

Description

Type

Default

disabled?

Gives the checkbox group a disabled state

boolean

undefined

error?

Adds an error statement to the checkbox group

ReactNode

undefined

values?

The text that will render to the right of the checkboxes of the group

Array<InputValue>

undefined

onChange?

Handle the values change for the checkboxes in the group

(event: SyntheticEvent<HTMLElement>, values: Array<InputValue>) => void

-

required?

Forces the checkbox groupto be required for the user

 

undefined

size?

Defines the size for the checkbox group

“small” | “medium” | “large”

“medium”

label

Defines the label for the checkbox group

ReactNode

undefined

options

Defines the name, value, label and so on for each checkbox in the group

Array<Option>

undefined

captionIconWithTooltip?

Defines the extra content after the label for the group

ReactNode

undefined

Checkbox

Name

Description

Type

Default

checked?

Determines if the checkbox is checked or not

boolean

false

data-test-id?

Gives the input a specific data test id

string

undefined

disabled?

Gives the checkbox a disabled state

boolean

undefined

error?

Adds an error statement to the checkbox

ReactNode

undefined

value?

The text that will render to the right of the checkbox

string | number

undefined

indeterminate?

Fills the checkbox with a - symbol

boolean

undefined

name?

Adds a specific name on the checkbox element

string

undefined

onChange?

Your unique onChange handler function

(event: React.SyntheticEvent<HTMLElement>, checked: boolean) => void

-

required?

Forces the checkbox to be required for the user

 

undefined

size?

Defines the size for the checkbox

“small” | “medium” | “large”

“medium”