Field

A wrapper component for form inputs with labels and validation.

<script lang="ts">
import { Field, FieldDescription, FieldLabel, Input } from "coss-svelte";
</script>

<Field>
	<FieldLabel>Name</FieldLabel>
	<Input placeholder="Enter your name" type="text" />
	<FieldDescription>Visible on your profile</FieldDescription>
</Field>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Field, FieldDescription, FieldError, FieldLabel, FieldValidity } from "coss-svelte";

Anatomy

Field
FieldDescription
FieldError
FieldLabel
FieldValidity

API Reference

Field

A wrapper component for form inputs with labels and validation.

Prop	Type	Default	Description
`id`	`string`	-	ID forwarded to the form control.
`label`	`string`	`""`	Accessible label or fallback visible label for the control.
`description`	`string`	`""`	Supporting text rendered by the component's built-in fallback layout.
`error`	`string`	`""`	Validation message rendered by the field fallback layout.
`required`	`boolean`	`false`	Marks the field or label as required.
`disabled`	`boolean`	`false`	Disables interaction with the control.
`invalid`	`boolean`	`false`	Marks the component invalid independently of parse validity.