Components

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.

BasicJust the essentials to get started.
StandardA step up with more features and support.
PremiumAdvanced options for growing needs.
DeluxeTop-tier features for maximum performance.
UltimateAll-inclusive plan with every feature available.
EnterpriseCustom solutions for large-scale operations.

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.

CheckboxAn interactive input that allows users to toggle a selection on or off, often used for settings or multiple-choice selections.
FieldField's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

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.

SmallPerfect for beginners. Basic resources for light projects.
MediumGreat for growing sites. More power and storage.
LargeIdeal for busy sites. Lots of resources and support.
Extra LargeMax power for demanding applications. Top-tier performance.

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.

BasicEssentials, get started
StandardMore features, support
PremiumAdvanced, growing needs
DeluxeTop-tier, maximum performance
UltimateAll-inclusive, every feature
EnterpriseCustom, large-scale operations

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.

BasicEssentials, get started
StandardMore features, support
PremiumAdvanced, growing needs

Icons

You can add icons to the Choicebox items by providing the icon prop.

LaravelLaravel is a web application framework with expressive, elegant syntax.
ReactReact is a JavaScript library for building user interfaces.
TypescriptTypescript is a typed superset of JavaScript that compiles to plain JavaScript.

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.

SmallPerfect for beginners. Basic resources for light projects.
MediumGreat for growing sites. More power and storage.
LargeIdeal for busy sites. Lots of resources and support.
Extra LargeMax power for demanding applications. Top-tier performance.
You have selected: sm

Disabled

Disable the entire Choicebox by applying the isDisabled prop.

SmallPerfect for beginners. Basic resources for light projects.
MediumGreat for growing sites. More power and storage.
LargeIdeal for busy sites. Lots of resources and support.
Extra LargeMax power for demanding applications. Top-tier performance.

Individual items can also be disabled by specifying their keys in the disabledKeys prop.

<Choicebox disabledKeys={['sm', 'lg']} />
Get premium blocksCreate stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Tooltip Chart
Next
Dropdown