Перейти к содержимому
v2.5.0
English
Русский
Документация

Fieldset

Fieldset объединяет связанные элементы управления в одну семантическую группу.
StorybookИсходники

Обзор

Стилизация Fieldset в основном определяется глобальными токенами темы, а не обширным локальным контрактом CSS-переменных компонента.

Публичные CSS-переменные

В текущей реализации нет отдельных публичных переменных --fieldset-*.

Компонент в основном использует общие системные токены:

Notify me by
ПеременнаяЗначениеВлияет на
рамка группы в варианте outlinedFieldset
В этом состоянии изменений не видно
приглушённый вспомогательный текст legendпотомок .sublegend внутри Fieldset
В этом состоянии изменений не видно
базовый радиус скругленияFieldset
В этом состоянии изменений не видно
радиус для внешнего вида outlinedFieldset[data-appearance='outlined']
В этом состоянии изменений не видно
вертикальный отступ между элементами группыкорень и заголовок
В этом состоянии изменений не видно
адаптивные внутренние отступывнешний вид outlined—В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Fieldset использует токены рамки, радиуса и отступов, чтобы задать контейнер группы.

Заголовок

FieldsetHeader — flex-колонка с нижним отступом перед сгруппированными элементами.

Legend

FieldsetLegend сохраняет нативное поведение legend и лишь убирает внутренние отступы по умолчанию.

Взаимодействие состояний и вариантов

  • outlined добавляет рамку, радиус и адаптивные внутренние отступы.
  • transparent убирает рамку и отступы, но сохраняет семантическую группировку.
  • Стили отключённого состояния в основном идут от вложенных элементов управления, а не от токенов корня fieldset.

Примеры

Используйте токены темы, чтобы уплотнить отступы

Плотная панель фильтров переопределяет gap и padding токенами отступов и сочетает их с меньшей легендой и чекбоксами size='sm'.

use-theme-tokens-to-tighten-spacing.tsx · 27 строк
import {
  Checkbox,
  CheckboxCheckedIcon,
  CheckboxIndicator,
  CheckboxInput,
  Fieldset,
  FieldsetLegend,
} from '@vega-ui/react';

const COLUMNS = ['Status', 'Owner', 'Due date', 'Priority', 'Last updated'];

export default function UseThemeTokensToTightenSpacing() {

Согласуйте радиус с окружающей панелью

Внутри скруглённой панели дайте fieldset радиус меньше, чем у панели, чтобы углы оставались концентричными.

match-surrounding-panel-radius.tsx · 20 строк
import { Fieldset, FieldsetLegend, Label, TextField, TextFieldInput } from '@vega-ui/react';
import { useId } from 'react';

export default function MatchSurroundingPanelRadius() {
  const id = useId();

  return (
    <div style={{ padding: 'var(--spacing-8)', borderRadius: 'var(--radius-6)', background: 'var(--fills-quaternary)', width: '100%' }}>
      <Fieldset appearance='outlined' style={{ borderRadius: 'var(--radius-4)' }}>
        <FieldsetLegend>Billing contact</FieldsetLegend>
        <div style={{ display: 'grid', gap: 'var(--spacing-3)' }}>
          <Label htmlFor={id}>Invoice email</Label>

Не переопределяйте

  • не убирайте семантику legend с помощью display: contents
  • не полагайтесь на transparent, когда для понимания нужна видимая граница
  • не стилизуйте корень как обычную карточку вместо семантической группы формы