Choicebox
A bigger, juiced-up version of a Radio or Checkbox, giving users a chunky tap target and extra deets.
Basic
The Choicebox is an enhanced version of a GridList, offering users a larger tap target and additional details.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The Choicebox comes packed with several components to enhance functionality and provide a seamless experience.
Manual Installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
Single Selection
Although the Choicebox defaults to allowing multiple selections, it can be configured for single selection by setting the selectionMode prop.
Columns and Gap
The Choicebox default layout is set with columns={2} and a gap={4} between items. You can customize these settings by providing your own columns and gap props.
No Gap
If you set gap={0} and columns={1}, the Choicebox items will lose their individual rounded corners, and the rounded corners will be applied to the parent container instead.
Icons
You can add icons to the Choicebox items by providing the icon prop.
Controlled
This component can function as either controlled or uncontrolled. For controlled use, provide the selectedKeys prop and manage updates with the onSelectionChange event handler.
Disabled
Disable the entire Choicebox by applying the isDisabled prop.
Individual items can also be disabled by specifying their keys in the disabledKeys prop.