components
Checkbox
v.1.0.0 | SaturnImport
1
import { Checkbox } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the checkbox component by examining all its avalaible props.
| Property | Variant | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant of the component |
| checked | Boolean | false | Default checked value |
| disabled | Boolean | false | When true, it is shown as disabled |
| error | Boolean | false | When true, it indicates the component has errors |
| required | Boolean | false | When true, it is required for the user to check mark as checked |
| value | String | - | Checkbox value |
| name | String | - | Checkbox name |
| label | CheckboxLabelType | - | Checkbox label |
| errorMessage | CheckboxHelperAndErrorTextType | - | When isError, error text to shown |
| checkedIcon | IElementOrIcon | - | When checked, checked icon |
| errorIcon | IElementOrIcon | - | When error, error icon |
| errorAriaLiveType | AriaLiveOptionType | assertive | aria-live for the error section |
| helperContent | CheckboxHelpContentType | - | JSX Element or string that can be added as help content |
| helperText | CheckboxHelperAndErrorTextType | - | Checkbox helper text if content isn't a JSX.Element |
| extraAriaDescribedBy | String | - | Allow to extend the input "aria-describedby" prop |
| screenReaderText | String | - | String used for screen reader text. Use it when the context may change when checking |
| tabIndex | Number | - | Tab index |
| aria-label | String | - | Input aria-label |
| aria-labelledby | String | - | Input aria-labelledby |
| aria-hidden | String | - | It hides the element from screen readers |
| dataTestId | String | - | Test id of the input. Internal components will concatenate from this test id |
| ctv | CheckboxPropsStateStylesType | - | Modify styles for the default version of the component |