radio

import { Meta, ArgTypes, Story, Controls, Source, } from '@storybook/addon-docs/blocks'; import * as Stories from './radio.stories.tsx'; import Uncontrolled from './examples/uncontrolled.tsx?raw'; import Controlled from './examples/controlled.tsx?raw'; import SingleRadio from './examples/single-radio.tsx?raw';

Radio

The @bento/radio package provides accessible, customizable radio controls. It exports the RadioGroup and Radio primitives, enabling you to build groups of radio options with consistent keyboard navigation, focus management, and ARIA support.

The RadioGroup allows a user to select a single item from a list of Radio components.

The Radio is a single radio option that can be selected by the user.

Installation

npm install --save @bento/radio

Props

The following properties are available to be used on the RadioGroup and Radio primitives:

RadioGroup

Radio

Data Attributes, Slot Map and Props

The data attributes, slot map and props can be used to style and customize the RadioGroup and Radio primitives.

RadioGroup Data Attributes

Attribute	Description	Example Values
data-disabled	Indicates the group is disabled	"true"
data-readonly	Indicates the group is readonly	"true"
data-required	Indicates the group is required	"true"
data-invalid	Indicates the group is invalid	"true"

Radio Data Attributes

Attribute	Description	Example Values
data-pressed	Indicates the radio is being pressed	"true"
data-hovered	Indicates the radio is hovered	"true"
data-focused	Indicates the radio has focus	"true"
data-focus-visible	Indicates focus should be visible	"true"
data-selected	Indicates the radio is selected	"true"
data-disabled	Indicates the radio is disabled	"true"
data-readonly	Indicates the radio is readonly	"true"
data-invalid	Indicates the radio is invalid	"true"
data-required	Indicates the radio is required	"true"

RadioGroup Slot Map

Slot Name	Description
label	Label for radio group
description	Description for radio group
error	Error for radio group

Radio Slot Map

Slot Name	Description
icon-checked	Icon for checked radio
icon-unchecked	Icon for unchecked radio

Examples

Uncontrolled

The RadioGroup is uncontrolled by default.

Controlled

The RadioGroup can be controlled by passing a value and onChange prop.

Single Radio

Even if you only have one radio option, it must always be placed inside a RadioGroup.