Aki UI

Choicebox

チョイスボックス

A radio group rendered as full width cards, each with a title, a subtitle and a description. Built with Base UI↗↗ and Tailwind CSS.

HobbyFree

For personal projects and prototypes.

Pro$20/mo

For small teams shipping to production.

EnterpriseCustom

SSO, audit logs and a dedicated support channel.

Installation

Install the following dependencies:1

npm install @base-ui-components/react

Copy and paste the following code into a new component file:2

"use client"

import { Radio } from "@base-ui-components/react/radio"

import { RadioGroup } from "@base-ui-components/react/radio-group"

import {

type HTMLAttributes,

type LabelHTMLAttributes,

type ReactNode,

createContext,

useContext,

How to use it3

"use client"

import { useState } from "react"

import { Choicebox, ChoiceboxItem, ChoiceboxItemHeader, ChoiceboxItemTitle, ChoiceboxItemSubtitle, ChoiceboxItemDescription, ChoiceboxIndicator } from "@/components/ui/choicebox"

const plans = [

{ id: "hobby", title: "Hobby", price: "Free", description: "For personal projects and prototypes." },

{ id: "pro", title: "Pro", price: "$20/mo", description: "For small teams shipping to production." },

]

Props

Choicebox

Name	Default	Description
children	—	ReactNode ChoiceboxItem cards
value	—	string Controlled selected value, pair it with onValueChange
defaultValue	—	string Initially selected value when uncontrolled
onValueChange	—	(value: string) => void Called with the value of the picked item
className	—	string Additional classes on the group

ChoiceboxItem

Name	Default	Description
value	—	string Value reported to the group when picked
children	—	ReactNode A header and an indicator
className	—	string Additional classes on the card

Name

Default

Description

value

—

string

Value reported to the group when picked

children

—

ReactNode

A header and an indicator

className

—

string

Additional classes on the card

ChoiceboxItemHeader

Name	Default	Description
children	—	ReactNode Title, subtitle and description
className	—	string Additional classes on the text column

Name

Default

Description

children

—

ReactNode

Title, subtitle and description

className

—

string

Additional classes on the text column

ChoiceboxItemTitle

Name	Default	Description
children	—	ReactNode Name of the option, can wrap a subtitle
className	—	string Additional classes on the title

Name

Default

Description

children

—

ReactNode

Name of the option, can wrap a subtitle

className

—

string

Additional classes on the title

ChoiceboxItemSubtitle

Name	Default	Description
children	—	ReactNode Muted text sitting next to the title
className	—	string Additional classes on the subtitle

Name

Default

Description

children

—

ReactNode

Muted text sitting next to the title

className

—

string

Additional classes on the subtitle

ChoiceboxItemDescription

Name	Default	Description
children	—	ReactNode Supporting copy below the title
className	—	string Additional classes on the description

Name

Default

Description

children

—

ReactNode

Supporting copy below the title

className

—

string

Additional classes on the description

ChoiceboxIndicator

Name	Default	Description
className	—	string Additional classes on the radio, its value comes from the parent item

Name

Default

Description

className

—

string

Additional classes on the radio, its value comes from the parent item