Field

<form class="form">
  <div class="field">
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" />
    <p class="field-hint">As it should appear on applications.</p>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" class="is-invalid" aria-invalid="true" aria-describedby="email-err" />
    <p class="field-error" id="email-err" role="alert">Enter a valid email.</p>
  </div>
  <div class="field">
    <label for="handle">Handle</label>
    <input id="handle" class="is-valid" aria-describedby="handle-ok" />
    <p class="field-success" id="handle-ok">Looks good.</p>
  </div>
</form>

import { Form, Field, FieldLabel, Input, FieldHint, FieldError, Row } from 'caustica-design/core'
import 'caustica-design/css'

<Form>
  <Field>
    <FieldLabel htmlFor="name">Full name</FieldLabel>
    <Input id="name" name="name" autoComplete="name" />
    <FieldHint>As it should appear on applications.</FieldHint>
  </Field>
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" invalid aria-describedby="email-err" />
    <FieldError id="email-err">Enter a valid email.</FieldError>
  </Field>
  <Field>
    <FieldLabel htmlFor="handle">Handle</FieldLabel>
    <Input id="handle" valid aria-describedby="handle-ok" />
    <p className="field-success" id="handle-ok">Looks good.</p>
  </Field>
</Form>