Сегментированный элемент управления

Обзор

SegmentedControl — это предустановка, составленная из Radio и RadioGroup, с объединёнными вариантами. Используйте его для краткого взаимоисключающего выбора. Для навигации между панелями содержимого используйте Tabs.

Использование

Задайте доступное имя группы с помощью aria-label или aria-labelledby. Для каждого варианта требуется уникальная строка value. Выбор относится к группе; варианты не имеют независимого состояния выбора.

import { SegmentedControl } from 'twenty-ui/components/input';

export const BillingPeriod = () => (
  <SegmentedControl
    aria-label="Billing period"
    name="billingPeriod"
    defaultValue="annual"
    options={[
      { label: 'Annual', value: 'annual' },
      { label: 'Monthly', value: 'monthly' },
    ]}
  />
);

defaultValue инициализирует выбор. Группа управляет последующими изменениями. Добавьте onValueChange, если вам нужно отслеживать их, не управляя значением.

Управляемое состояние

import { useState } from 'react';
import { SegmentedControl } from 'twenty-ui/components/input';

export const BillingPeriod = () => {
  const [period, setPeriod] = useState('annual');

  return (
    <SegmentedControl
      aria-label="Billing period"
      name="billingPeriod"
      value={period}
      onValueChange={setPeriod}
      options={[
        { label: 'Annual', value: 'annual' },
        { label: 'Monthly', value: 'monthly' },
      ]}
    />
  );
};

Храните value в состоянии приложения и обновляйте его в onValueChange. Не сочетайте value и defaultValue и не переключайте режимы управления после монтирования.

Параметры значков

import { SegmentedControl } from 'twenty-ui/components/input';
import { IconList, IconLayoutKanban } from 'twenty-ui/icon';

export const RecordLayout = () => (
  <SegmentedControl
    aria-label="Record layout"
    defaultValue="list"
    itemWidth="content"
    options={[
      { value: 'list', startIcon: <IconList />, 'aria-label': 'List' },
      {
        value: 'kanban',
        startIcon: <IconLayoutKanban />,
        'aria-label': 'Kanban',
      },
    ]}
  />
);

Для параметра только со значком требуется aria-label. startIcon является декоративным и скрыт от вспомогательных технологий. Параметры с видимым текстом используют label и также могут предоставлять startIcon. Установите disabled для параметра, чтобы запретить его выбор, или для группы, чтобы отключить все параметры.

Клавиатура, формы и направление

Клавиша Tab переводит фокус в группу; клавиши со стрелками перемещают между включенными параметрами и обновляют выбор. Это соответствует поведению переключателей. Группы выбора в раскрывающемся списке перемещают фокус клавишами со стрелками и выбирают при активации. itemWidth="equal" используется по умолчанию; используйте content, когда ширину должны определять метки. Установите name, чтобы включить выбранное значение в отправку нативной формы. Предустановка сохраняет required, readOnly, состояние disabled и интеграцию с нативными формами RadioGroup. onValueChange получает выбранное значение и сведения о событии Base UI, включая reason и cancel(). Для содержимого справа налево используйте DirectionProvider вместе с соответствующим атрибутом dir. Провайдер управляет взаимодействием с учетом направления; dir управляет макетом документа.

Композиция и нативные свойства

Нативные свойства, className, style, render и ref применяются к div группы. Используйте render, чтобы скомпоновать эту группу с другим элементом; сохраните ее доступное имя и семантику группы переключателей. Параметры отображают элементы span с role="radio" и скрытыми нативными входными элементами переключателей. Предустановка не назначает роли вкладки или панели вкладок. Для пользовательского содержимого переключателя, нативных свойств для каждого параметра или другого целевого элемента рендеринга переключателя используйте напрямую Radio.Root и RadioGroup.

Свойства

string

обязательно

Accessible group name. Supply this or aria-labelledby.

string

обязательно

ID of an element that labels the group. Supply this or aria-label.

string | ((state: RadioGroupState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

string

The uncontrolled value of the radio button that should be initially selected.To render a controlled radio group, use the value prop instead.

boolean

по умолчанию:"false"

Whether the component should ignore user interaction.

string

Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.

boolean

по умолчанию:"false"

Stretch the control to the width of its container.

Ref<HTMLInputElement>

A ref to access the hidden input element.

"content" | "equal"

по умолчанию:"equal"

Use equal-width options or size each option to its content.

string

Identifies the field when a form is submitted.

((value: TValue, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)

Callback fired when the value changes.

readonly SegmentedControlOption<TValue>[]

обязательно

Options with a unique string value, a label or startIcon, and optional disabled. Icon-only options require an aria-label.

boolean

по умолчанию:"false"

Whether the user should be unable to select a different radio button in the group.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioGroupState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

boolean

по умолчанию:"false"

Whether the user must choose a value before submitting a form.

"md" | "sm"

по умолчанию:"md"

Control height: sm (24px) or md (32px).

CSSProperties | ((state: RadioGroupState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

string

The controlled value of the radio item that should be currently selected.To render an uncontrolled radio group, use the defaultValue prop instead.

"rectangle" | "round"

по умолчанию:"round"

Shape: round is a pill, rectangle fills its container with form-field corners.

Разработчики

Приложения

API

Самостоятельный хостинг

Внести вклад

Библиотека интерфейса

Сегментированный элемент управления

Обзор

Использование

Управляемое состояние

Параметры значков

Клавиатура, формы и направление

Композиция и нативные свойства

Свойства

​Обзор

​Использование

​Управляемое состояние

​Параметры значков

​Клавиатура, формы и направление

​Композиция и нативные свойства

​Свойства

Обзор

Использование

Управляемое состояние

Параметры значков

Клавиатура, формы и направление

Композиция и нативные свойства

Свойства