Segmented Control
A compact button group that lets users switch between a set of mutually exclusive views or modes.
diwa-segmented-control Properties
| Name | Type | Default | Description |
|---|---|---|---|
value | string | '' | Currently selected segment value. |
disabled | boolean | false | Disables all segments. |
compact | boolean | false | Enables dense mode. Reduces segment padding and font size. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. |
diwa-segmented-control Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
update | { value: string } | No | Emitted when the selected segment changes. |
diwa-segmented-control Slots
Default slot — accepts one or more diwa-segmented-control-item elements.
diwa-segmented-control-item Properties
| Name | Type | Default | Description |
|---|---|---|---|
value | string | '' | The value emitted when this segment is selected. |
selected | boolean | false | Whether this segment is active. Managed by the parent. |
disabled | boolean | false | Disables this segment. Also set by the parent when the group is disabled. |
compact | boolean | false | Dense-mode sizing. Also set by the parent. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. |
diwa-segmented-control-item Slots
Default slot — segment label text or icon.