OddApp Design

FormField

@oddapp/ui · Tier 1

Layout wrapper that wires a Label, Input, helper text, and error together.

Default

import { FormField, Input } from '@oddapp/ui'

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

States

import { FormField, Input, FormError } from '@oddapp/ui'

<FormField label="Email" htmlFor="email" required>
  <Input id="email" type="email" error />
  <FormError message="Enter a valid email address." />
</FormField>