components
Checkbox
v.1.0.0 | Saturn
StorybookIt allows user to select multiple values from several options. Always use label to briefly identify and describe the purpose of a checkbox element. For further context use helperText.
<Checkbox variant="DEFAULT" label={{ content: 'Label' }} checkedIcon={{ icon: 'ICON_CHECK' }} />Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefined style for its quick use. Access them through the variant prop:
<Checkbox variant="DEFAULT" label={{ content: 'Label' }} checkedIcon={{ icon: 'ICON_CHECK' }} />Disabled
Use the disabled prop to inform users that no interaction is allowed in this moment.
<Checkbox variant="DEFAULT" label={{ content: 'Label' }} checkedIcon={{ icon: 'ICON_CHECK' }} disabled={true} />Required
For the required prop is also need to select the requiredSymbol for visually communicate the mandatory selection to the user.
<Checkbox variant="DEFAULT" label={{ content: 'Label', requiredSymbol: '*' }} checkedIcon={{ icon: 'ICON_CHECK' }} required="true" />Error
It is recommended to use the error prop in order to communicate the user through the errorMessage which is and how to solve it, also the errorIcon should be used to better alert the user. This elements will be displayed when error is true.
<Checkbox
variant="DEFAULT"
label={{ content: 'Label', requiredSymbol: '*' }}
checkedIcon={{ icon: 'ICON_CHECK' }}
error={true}
errorMessage={{ content: 'Text error' }}
errorIcon={{ icon: 'ICON_ERROR' }}
/>