SegmentedControl

A compact group of segments for choosing one view or option.

View

Day Whole week Month

Usage

<script>
  import { Label, SegmentedControl, SegmentedControlItem } from 'fluentui-svelte';
  let selectedValue = $state('day');
</script>

<Label label="View">
<SegmentedControl name="view" bind:selectedValue>
  <SegmentedControlItem value="day">Day</SegmentedControlItem>
  <SegmentedControlItem value="week">Week</SegmentedControlItem>
  <SegmentedControlItem value="month">Month</SegmentedControlItem>
</SegmentedControl>
</Label>

Arrow keys move focus; Space or Enter selects. Set selectOnFocus to select while navigating. Tab enters the selected radio. Use Label, aria-label or aria-labelledby to name the group.

Text, icons and mixed content

Use short text labels, icons with accessible names, or icons alongside text. The icon prop accepts a Fluent icon component or a Svelte snippet. Every option needs a unique value within its group.

View Code

<SegmentedControl selectedValue="day" aria-label="View">
  <SegmentedControlItem value="day">Day</SegmentedControlItem>
  <SegmentedControlItem value="week">Whole week</SegmentedControlItem>
</SegmentedControl>

<SegmentedControl selectedValue="day" aria-label="View">
  <SegmentedControlItem value="day" icon={CalendarDayRegular} aria-label="Day" />
  <SegmentedControlItem value="week" icon={CalendarWeekStartRegular} aria-label="Whole week" />
</SegmentedControl>

<SegmentedControl selectedValue="day" aria-label="View">
  <SegmentedControlItem value="day" icon={CalendarDayRegular}>Day</SegmentedControlItem>
  <SegmentedControlItem value="week" icon={CalendarWeekStartRegular}>Whole week</SegmentedControlItem>
</SegmentedControl>

Equal widths or fit to content

Segments have equal widths by default. Set equalWidth to false to fit each segment to its content.

View Code

<SegmentedControl equalWidth={true} aria-label="View">...</SegmentedControl>
<SegmentedControl equalWidth={false} aria-label="View">...</SegmentedControl>

Sizes

Choose size: small for compact rows, medium for standard controls or large when more space is available. The size is shared by every segment in the group.

View Code

<SegmentedControl size="small" aria-label="View">...</SegmentedControl>
<SegmentedControl size="medium" aria-label="View">...</SegmentedControl>
<SegmentedControl size="large" aria-label="View">...</SegmentedControl>

Selection indicator

Set hideIndicator to hide the selection indicator.

View Code

<SegmentedControl selectedValue="day" hideIndicator aria-label="View">...</SegmentedControl>

Day Whole week Month

Selection on focus

Arrow keys move focus without changing the selection. Enable selectOnFocus to select the focused segment.

View Code

<SegmentedControl selectedValue="day" selectOnFocus aria-label="View">...</SegmentedControl>

Day Whole week Month

Disabled options and groups

Disable one option to keep it visible while unavailable, or disable the whole group. Disabled radios are skipped by keyboard navigation and excluded from FormData and validation.

View Code

<SegmentedControl selectedValue="day" aria-label="View">
  <SegmentedControlItem value="day">Day</SegmentedControlItem>
  <SegmentedControlItem value="week" disabled>Whole week</SegmentedControlItem>
  <SegmentedControlItem value="month">Month</SegmentedControlItem>
</SegmentedControl>

<SegmentedControl disabled selectedValue="day" aria-label="View">...</SegmentedControl>

Using Label

Wrap SegmentedControl in Label to name the group automatically. Each option retains its own text or aria-label. An explicit aria-label or aria-labelledby on the group takes precedence. Label marks a field as required visually; set required on SegmentedControl to enable validation.

View Code

<Label label="View" labelPosition="above">
  <SegmentedControl name="view" bind:selectedValue>
    <SegmentedControlItem value="day">Day</SegmentedControlItem>
    <SegmentedControlItem value="week">Whole week</SegmentedControlItem>
  </SegmentedControl>
</Label>

View

Day Whole week Month

Submission, validation and reset

Set name to the field name your form expects. Only the checked enabled radio is submitted. required prevents submission until an option is selected. Reset restores the selection captured when the group was created, including an initially empty selection, and updates bind:selectedValue.

View Code

<script lang="ts">
  import { Button, Label, SegmentedControl, SegmentedControlItem } from 'fluentui-svelte';
  let selectedValue = $state('');
  let submitted = $state('');
</script>

<form onsubmit={(event) => {
  event.preventDefault();
  submitted = JSON.stringify(Object.fromEntries(new FormData(event.currentTarget)));
}}>
  <Label label="View" required={{ message: 'Choose a view' }}>
    <SegmentedControl name="view" required validationMessage="Choose a view" bind:selectedValue>
      <SegmentedControlItem value="day">Day</SegmentedControlItem>
      <SegmentedControlItem value="week">Whole week</SegmentedControlItem>
    </SegmentedControl>
  </Label>
  <Button type="submit">Submit</Button>
  <Button type="reset" appearance="standard">Reset</Button>
</form>
<output>{submitted}</output>

External forms

Set form to the id of a form elsewhere on the page. Every radio belongs to that form and participates in its submission, validation and reset behavior.

View Code

<form id="preferences">
  <Button type="submit">Submit</Button>
</form>

<SegmentedControl form="preferences" name="view" required aria-label="View">
  <SegmentedControlItem value="day">Day</SegmentedControlItem>
  <SegmentedControlItem value="week">Whole week</SegmentedControlItem>
</SegmentedControl>

Day Whole week Month

Binding and change events

Bind selectedValue to read or update the selection. onSelectionChange receives the native change event and the new string value. Selecting the same option, updating the binding programmatically or resetting the form does not call it.

View Code

<SegmentedControl bind:selectedValue aria-label="View"
  onSelectionChange={(event, value) => console.log(event.type, value)}>
  <SegmentedControlItem value="day">Day</SegmentedControlItem>
  <SegmentedControlItem value="week">Whole week</SegmentedControlItem>
</SegmentedControl>

Day Whole week Month

day