Field
Basics (Label + Input)
Basics (Label + Input) — see the example below.
tsx
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>
With description
With description — see the example below.
tsx
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>
Error state
Error state — see the example below.
tsx
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>
Metadata
Source: meta.generated.json (see npm run generate)
File base/field/meta.generated.json not found or path not allowed.