Segments

Segmented control form field with connected buttons.

Theme

Light Dark Auto

---
import Segments from "@forms/segments/Segments.astro";
---

<Segments
name="primary-demo-theme" options={
  [
    {
      "value": "light",
      "label": "Light",
      "icon": "sun",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": true
    },
    {
      "value": "dark",
      "label": "Dark",
      "icon": "moon",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    },
    {
      "value": "auto",
      "label": "Auto",
      "icon": "computer-desktop",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    }
  ]
} title="Theme"
/>

---
blocks:
  _component: building-blocks/forms/segments
  name: primary-demo-theme
  title: Theme
  options:
    - value: light
      label: Light
      icon: sun
      iconSize: sm
      iconBackground: none
      checked: true
    - value: dark
      label: Dark
      icon: moon
      iconSize: sm
      iconBackground: none
      checked: false
    - value: auto
      label: Auto
      icon: computer-desktop
      iconSize: sm
      iconBackground: none
      checked: false
---

Overview

Displays connected buttons for choosing one or more options. Supports text or icon labels, and can switch between single-select (radio) and multi-select (checkbox) modes. Includes optional title, default selection, and browser state persistence on refresh.

Properties

title string

Optional title text for the fieldset.

name string | default: my_segments

A unique name attribute for the radio button group.

required boolean | default: false

Whether the field is required.

options array | default: array

Array of segment options with value, label, icon, and checked state.

Item Properties:

value string

The value entered by the user when the option is selected.

label string | default: Item

The label text for the option.

checked boolean

Whether the field is checked by default.

icon enum | default: bolt

The name of the icon to display from the icon library next to the segment option.

iconOnly boolean | default: false

When true, labels are used as tooltips instead of being displayed as text.

multiple boolean | default: false

When true, uses checkboxes for multiple selection instead of radio buttons for single selection.

keepStateOnRefresh boolean | default: true

When true, sets autocomplete="on" to allow browser to remember state on page refresh. Defaults to false (autocomplete="off").

Examples

Basic

Select Size

Small Medium Large

---
import Segments from "@forms/segments/Segments.astro";
---

<Segments
name="size" options={
  [
    {
      "value": "small",
      "label": "Small",
      "checked": false
    },
    {
      "value": "medium",
      "label": "Medium",
      "checked": true
    },
    {
      "value": "large",
      "label": "Large",
      "checked": false
    }
  ]
} title="Select Size"
/>

---
blocks:
  _component: building-blocks/forms/segments
  name: size
  title: Select Size
  options:
    - value: small
      label: Small
      checked: false
    - value: medium
      label: Medium
      checked: true
    - value: large
      label: Large
      checked: false
---

With Icons

View Mode

Grid List Card

---
import Segments from "@forms/segments/Segments.astro";
---

<Segments
name="view-mode" options={
  [
    {
      "value": "grid",
      "label": "Grid",
      "icon": "squares-2x2",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": true
    },
    {
      "value": "list",
      "label": "List",
      "icon": "list-bullet",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    },
    {
      "value": "card",
      "label": "Card",
      "icon": "rectangle-stack",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    }
  ]
} title="View Mode"
/>

---
blocks:
  _component: building-blocks/forms/segments
  name: view-mode
  title: View Mode
  options:
    - value: grid
      label: Grid
      icon: squares-2x2
      iconSize: sm
      iconBackground: none
      checked: true
    - value: list
      label: List
      icon: list-bullet
      iconSize: sm
      iconBackground: none
      checked: false
    - value: card
      label: Card
      icon: rectangle-stack
      iconSize: sm
      iconBackground: none
      checked: false
---

Icon Only

View Options

---
import Segments from "@forms/segments/Segments.astro";
---

<Segments
iconOnly name="view-options" options={
  [
    {
      "value": "grid",
      "label": "Grid View",
      "icon": "squares-2x2",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": true
    },
    {
      "value": "list",
      "label": "List View",
      "icon": "list-bullet",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    },
    {
      "value": "card",
      "label": "Card View",
      "icon": "rectangle-stack",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    },
    {
      "value": "table",
      "label": "Table View",
      "icon": "table-cells",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    }
  ]
} title="View Options"
/>

---
blocks:
  _component: building-blocks/forms/segments
  name: view-options
  title: View Options
  iconOnly: true
  options:
    - value: grid
      label: Grid View
      icon: squares-2x2
      iconSize: sm
      iconBackground: none
      checked: true
    - value: list
      label: List View
      icon: list-bullet
      iconSize: sm
      iconBackground: none
      checked: false
    - value: card
      label: Card View
      icon: rectangle-stack
      iconSize: sm
      iconBackground: none
      checked: false
    - value: table
      label: Table View
      icon: table-cells
      iconSize: sm
      iconBackground: none
      checked: false
---

Multiple Selection

Select Features

Analytics Notifications API Access Support

---
import Segments from "@forms/segments/Segments.astro";
---

<Segments
multiple name="features" options={
  [
    {
      "value": "analytics",
      "label": "Analytics",
      "icon": "chart-bar",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": true
    },
    {
      "value": "notifications",
      "label": "Notifications",
      "icon": "bell",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    },
    {
      "value": "api",
      "label": "API Access",
      "icon": "code-bracket",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": true
    },
    {
      "value": "support",
      "label": "Support",
      "icon": "lifebuoy",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    }
  ]
} title="Select Features"
/>

---
blocks:
  _component: building-blocks/forms/segments
  name: features
  title: Select Features
  multiple: true
  options:
    - value: analytics
      label: Analytics
      icon: chart-bar
      iconSize: sm
      iconBackground: none
      checked: true
    - value: notifications
      label: Notifications
      icon: bell
      iconSize: sm
      iconBackground: none
      checked: false
    - value: api
      label: API Access
      icon: code-bracket
      iconSize: sm
      iconBackground: none
      checked: true
    - value: support
      label: Support
      icon: lifebuoy
      iconSize: sm
      iconBackground: none
      checked: false
---

Required

Account Status *

Active Inactive Pending

---
import Segments from "@forms/segments/Segments.astro";
---

<Segments
name="status" options={
  [
    {
      "value": "active",
      "label": "Active",
      "icon": "check-circle",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": true
    },
    {
      "value": "inactive",
      "label": "Inactive",
      "icon": "x-circle",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    },
    {
      "value": "pending",
      "label": "Pending",
      "icon": "clock",
      "iconSize": "sm",
      "iconBackground": "none",
      "checked": false
    }
  ]
} required title="Account Status"
/>

---
blocks:
  _component: building-blocks/forms/segments
  name: status
  title: Account Status
  required: true
  options:
    - value: active
      label: Active
      icon: check-circle
      iconSize: sm
      iconBackground: none
      checked: true
    - value: inactive
      label: Inactive
      icon: x-circle
      iconSize: sm
      iconBackground: none
      checked: false
    - value: pending
      label: Pending
      icon: clock
      iconSize: sm
      iconBackground: none
      checked: false
---