Field

import { Field, Input } from '@uswds-tailwind/react'

export default function FieldInputDemo() {
  return (
    <Field.Root className="max-w-xs">
      <Field.Label>Email address</Field.Label>
      <Field.Description>We will send updates to this address.</Field.Description>
      <Input type="email" />
    </Field.Root>
  )
}

import { Field, Input } from '@uswds-tailwind/react'

export default function FieldErrorDemo() {
  return (
    <Field.Root invalid className="max-w-xs">
      <Field.Label>Email address</Field.Label>
      <Field.Description>Enter the address where we can reach you.</Field.Description>
      <Field.ErrorMessage>Enter a valid email address.</Field.ErrorMessage>
      <Input type="email" />
    </Field.Root>
  )
}

import { Field, Select } from '@uswds-tailwind/react'

export default function FieldSelectDemo() {
  return (
    <Field.Root className="max-w-xs">
      <Field.Label>Contact method</Field.Label>
      <Field.Description>Choose how you would like a reply.</Field.Description>
      <Select.Root>
        <Select.Field defaultValue="">
          <option value="" disabled>Select a method</option>
          <option value="email">Email</option>
          <option value="phone">Phone</option>
        </Select.Field>
        <Select.Icon />
      </Select.Root>
    </Field.Root>
  )
}

import { Field, Textarea } from '@uswds-tailwind/react'

export default function FieldTextareaDemo() {
  return (
    <Field.Root className="max-w-xs">
      <Field.Label>Message</Field.Label>
      <Field.Description>Include any details that will help us respond.</Field.Description>
      <Textarea />
    </Field.Root>
  )
}

import { Field, Fieldset, Input } from '@uswds-tailwind/react'

export default function FieldFieldsetDemo() {
  return (
    <Fieldset.Root className="max-w-xs">
      <Fieldset.Legend>Personal information</Fieldset.Legend>
      <div className="space-y-4">
        <Field.Root>
          <Field.Label>First name</Field.Label>
          <Input type="text" />
        </Field.Root>
        <Field.Root>
          <Field.Label>Last name</Field.Label>
          <Input type="text" />
        </Field.Root>
      </div>
    </Fieldset.Root>
  )
}