SegmentedControl

Un grupo compacto de segmentos para elegir una vista u opción.

Vista

Día Semana completa Mes

Uso

<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>

Las flechas mueven el foco y Espacio o Enter seleccionan. Activa selectOnFocus para seleccionar al navegar. Tab entra en el radio seleccionado. Usa Label, aria-label o aria-labelledby para nombrar el grupo.

Texto, iconos y contenido mixto

Usa etiquetas breves, iconos con nombres accesibles o iconos junto al texto. La prop icon acepta un componente de icono Fluent o un snippet de Svelte. Cada opción necesita un valor único dentro del grupo.

Ver Código

<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>

Anchos iguales o ajustados al contenido

Los segmentos tienen el mismo ancho por defecto. Establece equalWidth en false para ajustar cada segmento a su contenido.

Ver Código

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

Tamaños

Elige small para filas compactas, medium para controles estándar o large cuando hay más espacio. Todos los segmentos del grupo comparten el tamaño.

Ver Código

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

Indicador de selección

Activa hideIndicator para ocultar el indicador de selección.

Ver Código

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

Día Semana completa Mes

Selección al enfocar

Las flechas mueven el foco sin cambiar la selección. Activa selectOnFocus para seleccionar el segmento enfocado.

Ver Código

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

Día Semana completa Mes

Opciones y grupos deshabilitados

Deshabilita una opción para mantenerla visible cuando no está disponible, o deshabilita todo el grupo. Los radios deshabilitados se omiten en la navegación por teclado y no participan en FormData ni en la validación.

Ver Código

<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>

Uso de Label

Envuelve SegmentedControl en Label para nombrar el grupo automáticamente. Cada opción conserva su texto o aria-label. Un aria-label o aria-labelledby explícito en el grupo tiene prioridad. Label muestra la marca visual de campo obligatorio; establece required en SegmentedControl para activar la validación.

Ver Código

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

Vista

Día Semana completa Mes

Envío, validación y reinicio

Establece name con el nombre del campo que espera el formulario. Solo se envía el radio marcado y habilitado. required impide el envío hasta seleccionar una opción. Reiniciar restaura la selección que tenía el grupo al crearse, incluida una selección inicialmente vacía, y actualiza bind:selectedValue.

Ver Código

<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>

Formularios externos

Establece form con el id de un formulario situado en otra parte de la página. Todos los radios pertenecen a ese formulario y participan en su envío, validación y reinicio.

Ver Código

<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>

Día Semana completa Mes

Enlace y eventos de cambio

Enlaza selectedValue para leer o actualizar la selección. onSelectionChange recibe el evento change nativo y el nuevo valor de texto. Seleccionar la misma opción, actualizar el enlace desde código o reiniciar el formulario no ejecuta el callback.

Ver Código

<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>

Día Semana completa Mes

day