Segmented Control

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

php artisan blatui:add segmented-control

List Grid Board

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

Sizes

Day Week Month

@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

List Grid Board

<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'],
    ]"
/>