Installation
Usage
<script lang="ts">
import * as Field from "$lib/components/ui/field/index.js";
import { Input } from "$lib/components/ui/input/index.js";
</script>
<Field.Root>
<Field.Label>Name</Field.Label>
<Input type="text" placeholder="Enter your name" />
<Field.Description>Visible on your profile</Field.Description>
<Field.Error>Please enter a valid name</Field.Error>
<Field.Validity>
{#snippet children(validity)}
{#if validity.error}<p>{validity.error}</p>{/if}
{/snippet}
</Field.Validity>
</Field.Root>API Reference
Field.Root
Root component. Styled wrapper for Field.Root from Shards UI with flex column layout.
Field.Label
Label for the field. Styled wrapper for Field.Label from Shards UI.
Field.Item
Container for field items. Styled wrapper for Field.Item from Shards UI.
Field.Description
Description text for the field. Styled wrapper for Field.Description from Shards UI with muted foreground color.
Field.Error
Error message for the field. Styled wrapper for Field.Error from Shards UI with destructive foreground color.
Field.Control
Renders a native input through Shards Field.Control, or a textarea with as="textarea". It connects the control to the field label, description, validation, and error state. Use it when styling a native control directly.
Textarea does not require Field.Control. It wraps the control internally and integrates with Field in the same way as Input and the other built-in controls.
Field.Validity
Alias for Field.Validity from Shards UI.
Examples
Required Field
Disabled Field
With Error
Enter an invalid email address and press enter to see the error.