ABUI | Components, blocks, and utilities by Antonio Brandao.

Radio Rows

A radio rows component.

Basic Example

basic-example.tsx

const [value, setValue] = useState("1")<RadioRows value={value} onValueChange={setValue}>  <RadioRowsItem value="1">Option 1</RadioRowsItem>  <RadioRowsItem value="2">Option 2</RadioRowsItem>  <RadioRowsItem value="3">Option 3</RadioRowsItem></RadioRows>

With Disabled Option

disabled-option.tsx

<RadioRows defaultValue="email">  <RadioRowsItem value="email">Email</RadioRowsItem>  <RadioRowsItem value="sms" disabled>SMS</RadioRowsItem>  <RadioRowsItem value="push">Push</RadioRowsItem></RadioRows>

With Descriptions

with-descriptions.tsx

const [value, setValue] = useState("pro")<RadioRows value={value} onValueChange={setValue}>  <RadioRowsItem value="starter">    <RadioRowsItemTitle>Starter</RadioRowsItemTitle>    <RadioRowsItemDescription>Perfect for beginners</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="pro">    <RadioRowsItemTitle>Pro</RadioRowsItemTitle>    <RadioRowsItemDescription>Best for professionals</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="team">    <RadioRowsItemTitle>Team</RadioRowsItemTitle>    <RadioRowsItemDescription>Collaborate together</RadioRowsItemDescription>  </RadioRowsItem></RadioRows>

Variant: Outline

variant-outline.tsx

const [value, setValue] = useState("standard")<RadioRows value={value} onValueChange={setValue}>  <RadioRowsItem value="basic" variant="outline">    <RadioRowsItemTitle>Basic</RadioRowsItemTitle>    <RadioRowsItemDescription>Free forever</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="standard" variant="outline">    <RadioRowsItemTitle>Standard</RadioRowsItemTitle>    <RadioRowsItemDescription>$9/month</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="premium" variant="outline">    <RadioRowsItemTitle>Premium</RadioRowsItemTitle>    <RadioRowsItemDescription>$29/month</RadioRowsItemDescription>  </RadioRowsItem></RadioRows>

Variant: Primary

variant-primary.tsx

const [value, setValue] = useState("standard")<RadioRows value={value} onValueChange={setValue}>  <RadioRowsItem value="basic" variant="primary">    <RadioRowsItemTitle>Basic</RadioRowsItemTitle>    <RadioRowsItemDescription>Free forever</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="standard" variant="primary">    <RadioRowsItemTitle>Standard</RadioRowsItemTitle>    <RadioRowsItemDescription>$9/month</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="premium" variant="primary">    <RadioRowsItemTitle>Premium</RadioRowsItemTitle>    <RadioRowsItemDescription>$29/month</RadioRowsItemDescription>  </RadioRowsItem></RadioRows>

Variant: Secondary

variant-secondary.tsx

const [value, setValue] = useState("free")<RadioRows value={value} onValueChange={setValue}>  <RadioRowsItem value="free" variant="secondary">    <RadioRowsItemTitle>Free Shipping</RadioRowsItemTitle>    <RadioRowsItemDescription>5-8 business days</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="express" variant="secondary">    <RadioRowsItemTitle>Express Shipping</RadioRowsItemTitle>    <RadioRowsItemDescription>2-3 business days</RadioRowsItemDescription>  </RadioRowsItem>  <RadioRowsItem value="overnight" variant="secondary">    <RadioRowsItemTitle>Overnight</RadioRowsItemTitle>    <RadioRowsItemDescription>Next business day</RadioRowsItemDescription>  </RadioRowsItem></RadioRows>

Features

Built on Radix UI Radio Group primitives for accessibility
Composable architecture with separate title and description components
Multiple style variants (default, outline, primary, secondary)
Full-width row layout with custom radio indicators
Support for disabled states
Smooth transitions and hover effects
Keyboard navigation and focus management
Fully typed with TypeScript

Component Props

RadioRows

value - string - Currently selected value
onValueChange - (value: string) => void - Callback when value changes
defaultValue - string - Default selected value (uncontrolled)
containerClassName - string - Additional classes for the inner container
className - string

RadioRowsItem

value - string (required) - The value for this radio item
disabled - boolean - Whether the item is disabled
variant - "default" | "outline" | "primary" | "secondary" (default: "default")
className - string
children - React.ReactNode - Either simple text or RadioRowsItemTitle/Description components

RadioRowsItemTitle

children - React.ReactNode - The title content
className - string

RadioRowsItemDescription

children - React.ReactNode - The description content
className - string