> ## Documentation Index
> Fetch the complete documentation index at: https://flex-fields.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# SegmentControl

<img src="https://mintcdn.com/flex-fields/AtYa9gTYnesC_HJb/art/sc-17.png?fit=max&auto=format&n=AtYa9gTYnesC_HJb&q=85&s=371d81b13ae23ceb735cc540ef8142cc" alt="SegmentControl" width="2752" height="1536" data-path="art/sc-17.png" />

[← Back to Table of Contents](/docs/index)

### Summary

iOS-style **single-select** segmented control.

|                |                                                                        |
| -------------- | ---------------------------------------------------------------------- |
| **Class**      | `Bjanczak\FilamentFlexFields\Filament\Forms\Components\SegmentControl` |
| **State type** | `string\|int` — one option key                                         |
| **Model cast** | `'alignment' =&gt; 'string'`                                           |
| **FieldType**  | `segment_control`                                                      |

### Basic usage

```php theme={null}
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\SegmentControl;

SegmentControl::make('alignment')
    ->label('Alignment')
    ->options([
        'left' => 'Left',
        'center' => [
            'label' => 'Center',
            'icon' => 'heroicon-o-bars-3',
            'tooltip' => 'Centered text',
        ],
        'right' => 'Right',
    ])
    ->variant('ghost')
    ->fullWidth();
```

### Validation

Built-in `Rule::in(...)` against option keys.

### Configuration API

#### `options(array|Closure $options)`

| Key        | Type           | Description                 |
| ---------- | -------------- | --------------------------- |
| `label`    | `string`       | Segment label               |
| `icon`     | `string\|null` | Heroicon (or use `icons()`) |
| `tooltip`  | `string\|null` | Hover tooltip               |
| `disabled` | `bool`         | Disables this segment       |

Simple form: `'left' =&gt; 'Left'`.

```php theme={null}
SegmentControl::make('field_name')
    ->options([
        'option_1' => 'Option 1',
        'option_2' => 'Option 2',
    ]);
```

#### `icons(array|Closure $icons)`

Map of option key → Heroicon name.

```php theme={null}
SegmentControl::make('field_name')
    ->icons([
        'option_1' => 'heroicon-o-star',
        'option_2' => 'heroicon-o-heart',
    ]);
```

#### `disabledOptions(array|Closure $keys)`

Disable segments by key.

```php theme={null}
SegmentControl::make('field_name')
    ->disabledOptions(['option_2']);
```

#### `variant(string|Closure $variant)`

| Value     | Description                                             |
| --------- | ------------------------------------------------------- |
| `default` | Filled track background. **Default.**                   |
| `ghost`   | Transparent track; uses `color()` for selection accent. |

```php theme={null}
SegmentControl::make('field_name')
    ->variant('primary');
```

#### `color(string|Closure|null $color)`

Selection accent color. For `ghost`, defaults to `primary` when omitted.

```php theme={null}
SegmentControl::make('field_name')
    ->color('primary');
```

#### `separators(bool|Closure $condition = true)`

Vertical dividers between segments. **Default: true.**

```php theme={null}
SegmentControl::make('field_name')
    ->separators(true);
```

#### `fullWidth(bool|Closure $condition = true)`

Stretch the control to the full field width.

```php theme={null}
SegmentControl::make('field_name')
    ->fullWidth(true);
```

#### `iconOnly(bool|Closure $condition = true)`

Hide labels; show icons only. Requires icons on options.

```php theme={null}
SegmentControl::make('field_name')
    ->iconOnly(true);
```

#### `expandSelectedLabel(bool|Closure $condition = true)`

Animates the selected segment to a wider width (label expansion).

```php theme={null}
SegmentControl::make('field_name')
    ->expandSelectedLabel(true);
```

#### `size(string|ControlSize|Closure $size)`

See [Control size](/docs/shared-concepts).

```php theme={null}
SegmentControl::make('field_name')
    ->size('md');
```

### FlexField schema config

| Config key              | Maps to                 |
| ----------------------- | ----------------------- |
| `options`               | `options()`             |
| `size`                  | `size()`                |
| `variant`               | `variant()`             |
| `full_width`            | `fullWidth()`           |
| `icons`                 | `icons()`               |
| `disabled_options`      | `disabledOptions()`     |
| `color`                 | `color()`               |
| `separators`            | `separators()`          |
| `icon_only`             | `iconOnly()`            |
| `expand_selected_label` | `expandSelectedLabel()` |

***