Fieldset

Нативный элемент fieldset с легендой.

Платёжные данные

Компания

Название, которое будет указано в счетах.

ИНН

Идентификационный номер налогоплательщика вашей компании.

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";
import { Input } from "@/components/ui/input";

export default function Particle() {
  return (
    <Fieldset className="flex w-full flex-col gap-6">
      <FieldsetLegend>Платёжные данные</FieldsetLegend>
      <Field>
        <FieldLabel>Компания</FieldLabel>
        <Input placeholder="Введите название компании" type="text" />
        <FieldDescription>
          Название, которое будет указано в счетах.
        </FieldDescription>
      </Field>

      <Field>
        <FieldLabel>ИНН</FieldLabel>
        <Input placeholder="Введите ИНН" type="text" />
        <FieldDescription>
          Идентификационный номер налогоплательщика вашей компании.
        </FieldDescription>
      </Field>
    </Fieldset>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/fieldset

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

import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"

<Fieldset>
  <FieldsetLegend>Fieldset legend</FieldsetLegend>
</Fieldset>

Справочник API

Fieldset

Корневой компонент. Стилизованная обёртка для Fieldset.Root из Base UI с компоновкой flex-колонкой.

FieldsetLegend

Легенда для fieldset. Стилизованная обёртка для Fieldset.Legend из Base UI с полужирной насыщенностью шрифта.

На этой странице

Установка Использование Справочник API Fieldset FieldsetLegend