Forms

FormField

Wrap any form control with labels, descriptions, hints, error messages, and help text. Provides context to child components for automatic error handling and sizing.

Playground

Experiment with different props in real-time.

Email Required

Your work email

We'll send a confirmation

Size

Orientation

Error

Required

Basic Usage

Wrap a form control with a label.

<script lang="ts">
  import { FormField, Input } from 'sv5ui';
</script>

<FormField label="Email">
  <Input placeholder="you@example.com" />
</FormField>

Description

Add context below the label.

Password

Must be at least 8 characters

<FormField label="Password" description="Must be at least 8 characters">
  <Input type="password" placeholder="Enter password" />
</FormField>

Hint

Display a hint next to the label (right side).

Username Required

Bio Optional

<FormField label="Username" hint="Required">
  <Input placeholder="johndoe" />
</FormField>

<FormField label="Bio" hint="Optional">
  <Textarea placeholder="Tell us about yourself..." />
</FormField>

Help Text

Display help text below the control.

Website

Include the full URL with https://

<FormField label="Website" help="Include the full URL with https://">
  <Input placeholder="https://example.com" leadingIcon="lucide:globe" />
</FormField>

Error

Error message replaces help text and auto-highlights the child control.

Please enter a valid email address

Name

Password

Password is too short

<!-- String error message -->
<FormField label="Email" error="Please enter a valid email address">
  <Input placeholder="you@example.com" />
</FormField>

<!-- Boolean error (no message) -->
<FormField label="Name" error={true}>
  <Input placeholder="Your name" />
</FormField>

<!-- Error replaces help text -->
<FormField label="Password" help="Must be 8+ chars" error="Password is too short">
  <Input type="password" />
</FormField>

Required

Adds a red asterisk to the label.

Full Name

Email We'll never share your email

<FormField label="Full Name" required>
  <Input placeholder="John Doe" />
</FormField>

<FormField label="Email" required hint="We'll never share your email">
  <Input type="email" placeholder="you@example.com" />
</FormField>

Sizes

Controls label and text size. Also propagates to child components.

<FormField label="Extra Small" size="xs">
  <Input placeholder="XS input" />
</FormField>

<FormField label="Small" size="sm">
  <Input placeholder="SM input" />
</FormField>

<FormField label="Medium" size="md">
  <Input placeholder="MD input" />
</FormField>

<FormField label="Large" size="lg">
  <Input placeholder="LG input" />
</FormField>

Horizontal

Side-by-side label and control layout.

Name

Role

<FormField label="Name" orientation="horizontal">
  <Input placeholder="John Doe" />
</FormField>

<FormField label="Email" orientation="horizontal" required>
  <Input type="email" placeholder="you@example.com" />
</FormField>

<FormField label="Role" orientation="horizontal">
  <Select items={roles} placeholder="Select role" />
</FormField>

With Input

Find anything in your workspace

Amount USD

<FormField label="Search" description="Find anything in your workspace">
  <Input icon="lucide:search" placeholder="Search..." />
</FormField>

<FormField label="Amount" hint="USD">
  <Input type="number" leadingIcon="lucide:dollar-sign" placeholder="0.00" />
</FormField>

With Textarea

Message

Describe your issue in detail

Markdown supported

<FormField label="Message" description="Describe your issue in detail" help="Markdown supported">
  <Textarea placeholder="Type your message..." autoresize />
</FormField>

With Select & SelectMenu

Country

Framework

Choose your preferred framework

<FormField label="Country" required>
  <Select items={countries} placeholder="Select a country" />
</FormField>

<FormField label="Framework" description="Choose your preferred framework">
  <SelectMenu items={frameworks} placeholder="Search frameworks..." />
</FormField>

With CheckboxGroup

Preferences

Email notifications

SMS notifications

Push notifications

<FormField label="Preferences">
  <CheckboxGroup items={[
    { value: 'email', label: 'Email notifications' },
    { value: 'sms', label: 'SMS notifications' },
    { value: 'push', label: 'Push notifications' }
  ]} />
</FormField>

With Switch

Dark Mode

Toggle dark theme

<FormField label="Dark Mode" description="Toggle dark theme">
  <Switch />
</FormField>

Complete Form

A real-world registration form combining multiple form components.

<form class="space-y-6">
  <FormField label="Full Name" required>
    <Input placeholder="John Doe" />
  </FormField>

  <FormField label="Email" required hint="We'll never share it">
    <Input type="email" placeholder="you@example.com" leadingIcon="lucide:mail" />
  </FormField>

  <FormField label="Password" required description="Must be at least 8 characters">
    <Input type="password" placeholder="Enter password" />
  </FormField>

  <FormField label="Role">
    <Select items={roles} placeholder="Select role" />
  </FormField>

  <FormField label="Bio" hint="Optional">
    <Textarea placeholder="Tell us about yourself..." autoresize />
  </FormField>

  <FormField label="Notifications">
    <Switch label="Receive email updates" />
  </FormField>

  <Button type="submit" label="Create Account" block />
</form>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Outermost wrapper`
`wrapper`	`Contains label section and description`
`labelWrapper`	`Flex container for label and hint`
`label`	`Label text element`
`description`	`Description text below label`
`hint`	`Hint text next to label`
`container`	`Contains form control + error/help`
`error`	`Error message text`
`help`	`Help text below control`

Snippets

Snippet	Description
`children`	`Form control content (receives error state)`
`labelSlot`	`Custom label rendering`
`hintSlot`	`Custom hint rendering`
`descriptionSlot`	`Custom description rendering`
`helpSlot`	`Custom help text rendering`
`errorSlot`	`Custom error rendering`

Props

Prop	Type	Default	Description
`label`	`string`	`-`	`Label text above the control`
`description`	`string`	`-`	`Description below the label`
`hint`	`string`	`-`	`Hint text next to label (right side)`
`help`	`string`	`-`	`Help text below the control`
`error`	`string \| boolean`	`-`	`Error message (replaces help text)`
`name`	`string`	`-`	`Field name for form error matching`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Size of labels and text`
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	`Layout direction`
`required`	`boolean`	`false`	`Adds asterisk to label`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

PinInput Form