Field

import { Field } from "~/components/ui/base/field";
import { Input } from "~/components/ui/base/input";
import { Label } from "~/components/ui/base/label";

<Field.Root>
  <Label for="user-email">E-mail</Label>
  <Input id="user-email" type="email" name="email" placeholder="you@example.com" />
</Field.Root>

import { Field } from "~/components/ui/base/field";
import { Input } from "~/components/ui/base/input";
import { Label } from "~/components/ui/base/label";

<Field.Root>
  <Label for="display-name">Display name</Label>
  <Input
    id="display-name"
    type="text"
    name="displayName"
    aria-describedby="display-name-hint"
  />
  <Field.Description id="display-name-hint">
    This is how other users will see you.
  </Field.Description>
</Field.Root>

import { Field } from "~/components/ui/base/field";
import { Input } from "~/components/ui/base/input";
import { Label } from "~/components/ui/base/label";

<Field.Root>
  <Label for="invite-code">Invite code</Label>
  <Input
    id="invite-code"
    type="text"
    aria-invalid="true"
    aria-describedby="invite-code-err"
    class="border-system-red focus-visible:ring-system-red"
  />
  <Field.Error id="invite-code-err">This code does not exist or has already expired.</Field.Error>
</Field.Root>