blatui

Components

Segmented Control

An iOS-style segmented control for picking one option from a small set.

php artisan blatui:add segmented-control 
<x-ui.segmented-control
    name="view"
    value="list"
    :options="[
        ['value' => 'list', 'label' => 'List'],
        ['value' => 'grid', 'label' => 'Grid'],
        ['value' => 'board', 'label' => 'Board'],
    ]"
/>

Sizes

@php
    $options = [
        ['value' => 'day', 'label' => 'Day'],
        ['value' => 'week', 'label' => 'Week'],
        ['value' => 'month', 'label' => 'Month'],
    ];
@endphp

<div class="flex flex-col items-start gap-3">
    <x-ui.segmented-control size="sm" value="week" :options="$options" />
    <x-ui.segmented-control value="week" :options="$options" />
    <x-ui.segmented-control size="lg" value="week" :options="$options" />
</div>

With Icons

<x-ui.segmented-control
    name="layout"
    value="grid"
    :options="[
        ['value' => 'list', 'label' => 'List', 'icon' => 'list'],
        ['value' => 'grid', 'label' => 'Grid', 'icon' => 'layout-grid'],
        ['value' => 'board', 'label' => 'Board', 'icon' => 'columns-3'],
    ]"
/>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public string $view = 'list';

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.segmented-control wire:model="view" :options="['list' => 'List', 'grid' => 'Grid']" />

API Reference

Props, slots and exposed methods for <x-ui.segmented-control>.

Props

Prop Type Default Description
options* array [] The segments to render. Each entry may be a plain string (used as both value and label) or an associative array with value, label, and an optional icon. See Each option below.
value string — The value of the segment that starts selected, matched against each option's value.
name string — Form field name for the underlying radio group; the selection submits with a form. A random name is generated when omitted.
size string 'default' Height and padding of the control.
sm default lg
disabled bool false Disables every segment so the selection cannot change.

* Required.

Each option

Prop Type Default Description
value* string — The submitted value for this segment. Falls back to label when omitted.
label string — Visible text for the segment. Falls back to value when omitted.
icon string — Optional Lucide icon name (e.g. "list") shown before the label.