Choice

Open source

Pick-one and pick-many controls built on native radios and checkboxes — a card, a full-width row, a segmented tab, a chip or a colour swatch.

Source Open issues Report a bug

Version: v1.2.1
Stability: stable
License: MIT
Related: Choicebox; Radio Tabs; Label Selector; Color Swatch Selector

2 of 5

Radio Rows — Single-choice rows — an alias of choicebox with the control at the start. Kept installable; new code composes choicebox.group.

Starter For individuals getting started. Up to 3 projects. Pro For growing teams. Unlimited projects and priority support. Enterprise Advanced security, SSO, and a dedicated account manager.

Size

Disabled

previews.components.radio-rows.default.blade.php Blade

<x-ui.radio-rows name="plan" value="pro" class="max-w-md text-start">
    <x-ui.radio-rows.item
        value="starter"
        :title="__('Starter')"
        :description="__('For individuals getting started. Up to 3 projects.')"
    />

    <x-ui.radio-rows.item
        value="pro"
        :title="__('Pro')"
        :description="__('For growing teams. Unlimited projects and priority support.')"
        checked
    />

    <x-ui.radio-rows.item
        value="enterprise"
        :title="__('Enterprise')"
        :description="__('Advanced security, SSO, and a dedicated account manager.')"
    />
</x-ui.radio-rows>

Sm Current

Starter For individuals getting started. Up to 3 projects. Pro For growing teams. Unlimited projects and priority support. Enterprise Advanced security, SSO, and a dedicated account manager.

Md Current

Starter For individuals getting started. Up to 3 projects. Pro For growing teams. Unlimited projects and priority support. Enterprise Advanced security, SSO, and a dedicated account manager.

Installation

terminal

php artisan ui:add radio-rows

Registry contract

php artisan ui:add radio-rows writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/radio-rows.blade.php
blade resources/views/components/ui/radio-rows/item.blade.php

Registry dependencies: choicebox
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

radio-rows.md

# Brok UI: Radio Rows (`radio-rows`)

Single-choice rows — an alias of choicebox with the control at the start. Kept installable; new code composes choicebox.group.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add radio-rows
```

## Usage

```blade
<x-ui.radio-rows name="plan" value="pro" class="max-w-md text-start">
    <x-ui.radio-rows.item
        value="starter"
        :title="__('Starter')"
        :description="__('For individuals getting started. Up to 3 projects.')"
    />

    <x-ui.radio-rows.item
        value="pro"
        :title="__('Pro')"
        :description="__('For growing teams. Unlimited projects and priority support.')"
        checked
    />

    <x-ui.radio-rows.item
        value="enterprise"
        :title="__('Enterprise')"
        :description="__('Advanced security, SSO, and a dedicated account manager.')"
    />
</x-ui.radio-rows>
```

## Props

- `name` (mixed|null, default `null`) — Declared by @props in the shipped Blade source.
- `value` (mixed, default `null`) — Submitted value for this row's radio input.
- `options` (array, default `[]`) — Declared by @props in the shipped Blade source.
- `size` (string, default `md`) — Declared by @props in the shipped Blade source.
- `disabled` (false|true, default `false`) — Documented catalog control used by the preview workbench.
- `title` (mixed|null, default `null`) — Declared by @props in the registry Blade source.
- `description` (mixed|null, default `null`) — Declared by @props in the registry Blade source.
- `checked` (bool, default `false`) — Declared by @props in the registry Blade source.

## Use when

- Use for a small set of mutually exclusive options that users should compare visibly before choosing.
- Maintaining existing code that already installed radio-rows for a row-style single-choice list.
- Wanting a single-choice row with a leading control, a title and a description.

## Avoid when

- Do not hide a small option set in a dropdown when recognition and comparison matter.
- Starting new code; compose <x-ui.choicebox.group indicator="start"> directly instead.
- Needing multi-select rows; choicebox with type="checkbox" supports that, radio-rows does not.

## Anti-patterns

- Hiding a small comparable set in a dropdown

## Rules

- Use the `<brok:radio-rows>` tag (or `<x-ui.radio-rows>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/radio-rows
- Registry JSON (files, props, contract): https://brokui.dev/r/open/radio-rows.json

Ask about Radio Rows in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Examples

Compact

compact.blade.php Blade

{{-- `size="sm"`: control-sized rows for a settings list, from an `options` array. --}}
<x-ui.radio-rows name="visibility" value="team" size="sm" class="max-w-md text-start" :options="[
    ['value' => 'private', 'title' => __('Private'), 'description' => __('Only you can see this project.')],
    ['value' => 'team', 'title' => __('Team'), 'description' => __('Everyone in your workspace can view it.')],
    ['value' => 'public', 'title' => __('Public'), 'description' => __('Anyone with the link can view it.')],
    ['value' => 'archived', 'title' => __('Archived'), 'description' => __('Read-only; not available on this plan.'), 'disabled' => true],
]" />

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
name	mixed \| null	null	Declared by @props in the shipped Blade source.
value	mixed	null	Submitted value for this row's radio input.
options	array	[]	Declared by @props in the shipped Blade source.
size	string	md	Declared by @props in the shipped Blade source.
disabled	false \| true	false	Documented catalog control used by the preview workbench.
title	mixed \| null	null	Declared by @props in the registry Blade source.
description	mixed \| null	null	Declared by @props in the registry Blade source.
checked	bool	false	Declared by @props in the registry Blade source.

Slots

default — Extra content rendered under the description.
x-ui.radio-rows.item — Installed subcomponent from the registry item.

Data slots

Stable hooks for CSS overrides and browser tests.

radio-rows radio-rows-item

Behavior

This item is a thin alias that renders <x-ui.choicebox.group type="radio" indicator="start">, so it inherits every choicebox behavior including native form submission and old()-based selection restoration.
Each row places its radio control at the start of the row instead of choicebox's default end position.
Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Guidance

Visible exclusive selection

Choose one option from a small visible set.

Use when

Use for a small set of mutually exclusive options that users should compare visibly before choosing.
Maintaining existing code that already installed radio-rows for a row-style single-choice list.
Wanting a single-choice row with a leading control, a title and a description.

Avoid when

Do not hide a small option set in a dropdown when recognition and comparison matter.
Starting new code; compose <x-ui.choicebox.group indicator="start"> directly instead.
Needing multi-select rows; choicebox with type="checkbox" supports that, radio-rows does not.

Use instead

Select or combobox for long option sets

Anti-patterns

Hiding a small comparable set in a dropdown

Anatomy: root radio-rows-item
Theming hooks: radio-rows radio-rows-item

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Each row renders a real native radio input, so keyboard navigation and screen-reader announcement match a native radio group.
Selection styling relies on :has(:checked) on the row label, so it works identically with a screen reader or keyboard-only navigation.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable files ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/radio-rows.blade.php Blade

{{-- Radio rows are choicebox cards with the control at the start. This item stays
     installable for existing code; new code composes <x-ui.choicebox.group>. --}}
@props([
    'name' => null,
    'value' => null,
    'options' => [],
    'size' => 'md',
])

@php
    $size = in_array($size, ['sm', 'md'], true) ? $size : 'md';
@endphp

<x-ui.choicebox.group type="radio" indicator="start" :name="$name" :value="$value" :options="$options" :size="$size" data-slot="radio-rows" {{ $attributes->except(['name']) }}>
    {{ $slot }}
</x-ui.choicebox.group>

resources/views/components/ui/radio-rows/item.blade.php Blade

{{-- A radio row is a choicebox with the control at the start. --}}
@props([
    'value',
    'title' => null,
    'description' => null,
    'disabled' => false,
    'checked' => false,
])

<x-ui.choicebox type="radio" indicator="start" :value="$value" :title="$title" :description="$description" :disabled="$disabled" :checked="$checked" data-slot="radio-rows-item" {{ $attributes }}>
    {{ $slot }}
</x-ui.choicebox>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.2.1
Status: Stable
License: open
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated
Contract: v6
Foundation: ≥ 1.0.0