🎉Save 15% on all Justd Blocks for a limited time during the launch!
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 Radio or Checkbox, offering users a larger tap target and additional details.

Just the essentials to get started.
A step up with more features and support.
Advanced options for growing needs.
Top-tier features for maximum performance.
All-inclusive plan with every feature available.
Custom 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 plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Choicebox's decked out with several components to make it bangin'.

Click to check or uncheck, like making a choice on a quiz, simple and straightforward for quick decisions.
Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Single Selection

Although the Choicebox defaults to allowing multiple selections, it can be configured for single selection by setting the selectionMode prop.

Perfect for beginners. Basic resources for light projects.
Great for growing sites. More power and storage.
Ideal for busy sites. Lots of resources and support.
Max 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.

Essentials, get started
More features, support
Advanced, growing needs
Top-tier, maximum performance
All-inclusive, every feature
Custom, 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.

Essentials, get started
More features, support
Advanced, growing needs

Icons

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

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

Disabled

Disable the entire Choicebox by applying the isDisabled prop.

Perfect for beginners. Basic resources for light projects.
Great for growing sites. More power and storage.
Ideal for busy sites. Lots of resources and support.
Max 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']} />
<How isCenter={false} toUse="collections/choicebox/choicebox-no-gap-demo" />
 
## 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.
<How isCenter={false} toUse="collections/choicebox/choicebox-controlled-demo" />
 
## Disabled
Disable the entire Choicebox by applying the `isDisabled` prop.
<How isCenter={false} withNoPadding={true} toUse="collections/choicebox/choicebox-disabled-demo" />
 
Individual items can also be disabled by specifying their keys in the `disabledKeys` prop.
 
```tsx
<Choicebox disabledKeys={['sm', 'lg']} />
Previous
Tooltip Chart
Next
Dropdown