FormField

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

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

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

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

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

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

<!-- 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>

<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>

<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>

<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>

<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>

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

<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>

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

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

<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>

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

  let username = $state('');
</script>

<FormField
  name="username"
  label="Username"
  description="Shown on your profile"
  help="3 to 20 characters"
  required
>
  <!-- Your id is merged with the field's ids, yours first -->
  <Input bind:value={username} aria-describedby="username-count" />
</FormField>

<p id="username-count">{username.length} / 20</p>

<!-- On its own: name the control yourself. The attribute lands on the thumb -->
<Slider aria-label="Volume" value={40} />

<!-- In a field: the label names it, and the description is announced -->
<FormField label="Brightness" description="Applies to this screen only">
  <Slider value={70} />
</FormField>