Forms

Field

A form field set with label, input, textarea and hint primitives built from native elements.

Component

05

Import

import {
  Field,
  FieldError,
  FieldHint,
  Input,
  Label,
  Textarea,
} from "@swirski/ui";

Composition

Field
|-- Label
|-- Input | Textarea | Select | Checkbox | RadioGroup
|-- FieldHint
`-- FieldError

Playground

6 controls

Use the address where clients can reach you.

Controls

label

placeholder

helper

state

multiline

disabled

Usage

<Field>
  <Label htmlFor="swirski-field">Email</Label>
  <Input
    id="swirski-field"
    placeholder="studio@swirski.dev"
  />
  <FieldHint>Use the address where clients can reach you.</FieldHint>
</Field>

Props

19 generated

Prop	Type	Default	Notes
`Field.asChild`	`boolean`	`false`	Generated from FieldProps.
`Field.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from FieldProps.
`Field.tone`	`'default'`	`"default"`	Generated from FieldProps.
`Field.variant`	`'default' \| 'inline'`	`"default"`	Generated from FieldProps.
`FieldError.size`	`'sm' \| 'md'`	`"md"`	Generated from FieldErrorProps.
`FieldError.tone`	`'default' \| 'danger'`	`"danger"`	Generated from FieldErrorProps.
`FieldError.variant`	`'default' \| 'plain'`	`"default"`	Generated from FieldErrorProps.
`FieldHint.size`	`'sm' \| 'md'`	`"md"`	Generated from FieldHintProps.
`FieldHint.tone`	`'default' \| 'muted'`	`"muted"`	Generated from FieldHintProps.
`FieldHint.variant`	`'default' \| 'plain'`	`"default"`	Generated from FieldHintProps.
`Input.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from InputProps.
`Input.tone`	`'default' \| 'danger'`	`"default"`	Generated from InputProps.
`Input.variant`	`'default' \| 'filled'`	`"default"`	Generated from InputProps.
`Label.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from LabelProps.
`Label.tone`	`'default' \| 'muted' \| 'danger'`	`"default"`	Generated from LabelProps.
`Label.variant`	`'default' \| 'plain'`	`"default"`	Generated from LabelProps.
`Textarea.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from TextareaProps.
`Textarea.tone`	`'default' \| 'danger'`	`"default"`	Generated from TextareaProps.
`Textarea.variant`	`'default' \| 'filled'`	`"default"`	Generated from TextareaProps.
`Field.className`	`string`	`-`	Adds classes to the field wrapper.
`Label.htmlFor`	`string`	`-`	Connects the label to an input or textarea id.
`Label.className`	`string`	`-`	Adds classes to the label.
`Input`	`InputHTMLAttributes<HTMLInputElement>`	`-`	Forwards native input props and refs.
`Textarea`	`TextareaHTMLAttributes<HTMLTextAreaElement>`	`-`	Forwards native textarea props and refs.
`FieldHint.className`	`string`	`-`	Adds classes to helper text.
`FieldError.className`	`string`	`-`	Adds classes to validation text.

Previous: Cursor Next: Select