Field

A wrapper that pairs labels, descriptions, and validation around controls.

The Field Component

Project name

Use a clear internal title so reviewers can find the right brief.

Visible across the workspace.

Basic Usage

Code Snippet

1<script lang="ts">2		import { Field, Input } from '$lib/components';3 4		let value = $state('');5	</script>6 7	<Field label="Project name" name="project-name" helper="Visible across your workspace.">8		<Input bind:value={value} placeholder="Spring launch" />9	</Field>

Examples

Horizontal Layout

Switch to a horizontal field for compact preference rows.

Auto publish

Turn this on to push the release live after approval.