Choice

# Brok UI: Radio Tabs (`radio-tabs`)

Segmented single-choice control built from visually-hidden native radios that submit in a normal form with no JavaScript.

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

## Install

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

## Usage

```blade
<div class="flex flex-col gap-6 text-start">
    <x-ui.radio-tabs name="view" aria-label="{{ __('View mode') }}">
        <x-ui.radio-tabs.item value="list" checked>{{ __('List') }}</x-ui.radio-tabs.item>
        <x-ui.radio-tabs.item value="grid">{{ __('Grid') }}</x-ui.radio-tabs.item>
        <x-ui.radio-tabs.item value="board">{{ __('Board') }}</x-ui.radio-tabs.item>
    </x-ui.radio-tabs>
</div>
```

## Props

- `name` (mixed|null, default `null`) — Declared by @props in the shipped Blade source.
- `value` (mixed, default `null`) — Submitted value for this segment's hidden radio input.
- `options` (array, default `[]`) — Declared by @props in the shipped Blade source.
- `disabled` (false|true, default `false`) — Documented catalog control used by the preview workbench.
- `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.
- Picking one value from 2 to 5 short options inside a form, styled as a segmented pill row.
- Needing the selection to submit as a normal form field, including a fallback with JavaScript disabled.

## Avoid when

- Do not hide a small option set in a dropdown when recognition and comparison matter.
- Switching a view or filter that is not a form value; use segmented-nav instead.
- Offering many options or options with descriptions; use radio, choicebox, or select.

## Anti-patterns

- Hiding a small comparable set in a dropdown

## Rules

- Use the `<brok:radio-tabs>` tag (or `<x-ui.radio-tabs>`) 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-tabs
- Registry JSON (files, props, contract): https://brokui.dev/r/open/radio-tabs.json

{{-- A wrapping <x-ui.field name="…"> shares its name down via @aware; the group
     adopts it (and forwards it to each segment, which also reads it via @aware)
     and self-wires aria-invalid/aria-describedby off the shared $errors bag.
     With no field ancestor the explicit `name` prop is used unchanged —
     fully backward-compatible. --}}
@aware([
    'name' => null,
])

@props([
    'name' => null,
    'value' => null,
    'options' => [],
])

@php
    $awareName = $name ?? null;
    $fieldName = $awareName ?? $attributes->get('name');

    $bag = ($errors ?? null) instanceof \Illuminate\Support\ViewErrorBag ? $errors : null;
    $hasBagError = $bag && filled($fieldName) && $bag->has($fieldName);

    // Restore selection from old() after a failed redirect-back; fall back to the
    // passed `value` when there is no flashed input.
    $resolvedValue = filled($fieldName) ? old($fieldName, $value) : $value;

    $describedBy = (filled($awareName) && $hasBagError) ? $fieldName.'-error' : null;
@endphp

{{--
    Segmented single-choice control. Each segment is a visually-hidden native
    <input type="radio"> inside a styled <label>, so it submits in a normal
    <form> with NO JavaScript and the active segment is shown purely via CSS
    (peer-checked). Segments inherit the group `name` via @aware; the default
    selection is set from `value` on the `:options` path, or by marking a
    composed segment with `checked`. Consumers wanting client state (no form)
    can add `x-model` directly to the inputs.
--}}
<div
    role="radiogroup"
    data-slot="radio-tabs"
    @if ($hasBagError) data-invalid="true" aria-invalid="true" @endif
    @if (filled($describedBy)) aria-describedby="{{ $describedBy }}" @endif
    {{ $attributes->except(['name'])->merge(['class' => 'inline-flex items-center gap-1 rounded-md bg-muted p-1 text-muted-foreground']) }}
>
    @if (! empty($options))
        @foreach ($options as $optionValue => $optionLabel)
            <x-ui.radio-tabs.item :value="$optionValue" :checked="$resolvedValue !== null && (string) $optionValue === (string) $resolvedValue">{{ __($optionLabel) }}</x-ui.radio-tabs.item>
        @endforeach
    @else
        {{ $slot }}
    @endif
</div>

@aware(['name' => null])

@props([
    'value',
    'disabled' => false,
    'checked' => false,
])

@php
    // The native radio is the "peer": visually hidden but focusable, so arrow-key
    // navigation, form submission and :checked all come for free. Active / idle /
    // focus styling is driven entirely off peer state via CSS — no JavaScript.
    //
    // Default selection is server-rendered via the `checked` prop. The
    // <x-ui.radio-tabs :options> path sets it automatically from the group
    // `value`; @aware cannot carry the group value into a segment because the
    // segment's own `value` attribute shadows it (documented @aware caveat), so
    // hand-composed segments mark their default with `checked`.
    // The styled element is the <label> that WRAPS the radio, so we key off
    // :has(:checked) / :has(:focus-visible) on the label — peer-* only reaches
    // later siblings, never the input's own parent.
    $segment = 'relative inline-flex cursor-pointer select-none items-center justify-center '
        .'whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition-all '
        .'motion-reduce:transition-none text-muted-foreground '
        .'has-[:checked]:bg-background has-[:checked]:text-foreground has-[:checked]:shadow-sm '
        .'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-background';

    if ($disabled) {
        $segment .= ' opacity-50 cursor-not-allowed';
    }
@endphp

<label
    data-slot="radio-tabs-item"
    @if ($disabled) aria-disabled="true" @endif
    {{ $attributes->merge(['class' => $segment]) }}
>
    <input
        type="radio"
        class="peer sr-only"
        name="{{ $name }}"
        value="{{ $value }}"
        @checked($checked)
        @disabled($disabled)
    />
    {{ $slot }}
</label>