Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/field.jsonUsage
<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
Alias for Field.Control from Shards UI. Use it to register a custom or third-party control with the field context so it participates in labelling, validation, and error state.
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.