Checkbox Group - Keep React
Table of Contents#
- Default Checkbox Group
- Circle Checkbox Group
- Checkbox Group With Icon
- Checkbox Group With Logo
- Checkbox Group With Avatar
- Checkbox Group With Image
- API Reference
Default Checkbox Group#
The Default Checkbox Group is a pre-designed Checkbox Group component that lets users select a single option from a list of checkboxes.
Circle Checkbox Group#
When the checkboxType is set to "circle" the checkboxes within the group are displayed in a circular shape rather than the traditional square shape.
Checkbox Group With Icon#
A Checkbox Group with Icon is a Checkbox Group component that includes an icon next to each checkbox option. In this case, the icon prop is used to specify the icon that should be displayed alongside the checkboxes.
Checkbox Group With Logo#
A Checkbox Group with Logo is a Checkbox Group component that includes a logo image next to each checkbox option using the img prop.
Checkbox Group With Avatar#
A Checkbox Group with Avatar is a Checkbox Group component that features an avatar image next to each checkbox option using the img prop.
Checkbox Group With Image#
A Checkbox Group with image is a Checkbox Group component that displays an image next to each checkbox option using the img prop.
API Reference#
Explore the available props for the checkbox group component
| Property | Description | Type | Default |
|---|---|---|---|
| checkboxType | Specifies the type of checkbox style: square or circular. | square circle | square |
| checkboxPosition | Specifies the position of the checkbox relative to the label. | left right | left |
| title | Main title or label for the checkbox group. | string | Static Design System |
| description | Additional description or information about the checkbox group. | string | The largest UI kit... |
| icon | Optional icon displayed alongside the checkbox group. | ReactNode | None |
| img | URL of an image displayed alongside the checkbox group. | string | URL |
| imgShape | Specifies the shape of the image: square or circular. | square circle | circle |
| value | Value of the currently selected checkbox. | string | selected |
| selected | Value of the pre-selected checkbox, if any. | string | selected |
| onOptionChange | Callback function when a checkbox option is changed. | (e: ChangeEvent) => void | function |