React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
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)}/>
}
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 |
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” |