Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Field

Field composes form label, description, error, and input building blocks.

CoreBasics@gaudi/design-system/core/FieldView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Field } from '@gaudi/design-system/core/Field';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/field-controls.json.

Usage

import { Field, FieldDescription, EmailInput, FieldLabel } from '@gaudi/design-system';
<Field>  <FieldLabel htmlFor='email'>Email</FieldLabel>  <EmailInput id='email' />  <FieldDescription>Used for article updates only.</FieldDescription></Field>

Examples

Controls in fields

Storybook

Validation errors

Storybook

Fieldsets of choices

Storybook

Fields that reflow by width

Storybook

Preferences form that checks itself

Storybook

Label accessories

Storybook

Inline edit

Storybook

API

14 props

Accessibility

Field keeps label, input, description, and error markup colocated so form controls can be wired with id/htmlFor.

InputText, search, numeric and date inputs with prefix and suffix slots.11 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesInputOtpOne-time code entry with grouped slots, paste support and completion feedback.1 exampleTooltipBrief contextual help attached to an independently labelled control.4 examplesCheckboxCheckbox renders a token-styled binary control.6 examplesRadioGroupChoose one option using native radio controls or selectable cards.5 examples