Fieldset

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

Labels, help text and errors for form controls. Inside a Field, the Label, Description and ErrorMessage are connected to the control for screen readers, and clicking the label focuses or toggles it. This works with vinui's Checkbox, Combobox, Input, Listbox, Select, Switch and Textarea:

import {
  Description,
  ErrorMessage,
  Field,
  FieldGroup,
  Fieldset,
  Label,
  Legend,
  Switch,
} from '@vinui/react';

<Fieldset>
  <Legend>Notifications</Legend>
  <Description>Changes apply to your whole team.</Description>
  <FieldGroup>
    <Field>
      <Label>Weekly summary</Label>
      <Description>A digest of activity, every Monday.</Description>
      <Switch />
    </Field>
  </FieldGroup>
</Fieldset>;

• disabled on a Fieldset or Field disables every control inside and dims the labels.
• ErrorMessage shows a validation error in --vin-color-danger.
• Description and ErrorMessage outside a Field render as plain text.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.