Field

A wrapper component that provides consistent structure and accessibility for form inputs with labels, helper text, and error messages.

Anatomy

<script>
  import {
    Field,
    FieldLabel,
    FieldHelperText,
    FieldErrorText,
  } from "@saas-ui/svelte/components/field";
  import { Input } from "@saas-ui/svelte/components/input";
</script>

<Field.Root>
  <Field.Label>Email</Field.Label>
  <Input placeholder="Enter your email" />
  <Field.HelperText>We'll never share your email.</Field.HelperText>
  <Field.ErrorText>Email is required</Field.ErrorText>
</Field.Root>

Examples

Basic Accessibility

Basic field with a label and input.

<Field.Root>
	<Field.Label>Email</Field.Label>
	<Input placeholder="me@example.com" />
</Field.Root>

Disabled Accessibility

Use the disabled prop on Field.Root to disable all contained inputs.

<Field.Root disabled>
	<Field.Label>Email</Field.Label>
	<Input disabled placeholder="me@example.com" />
</Field.Root>

Error Text Accessibility

Use the Field.ErrorText component with the invalid prop on Field.Root to display validation errors.

<Field.Root invalid>
	<Field.Label>Email</Field.Label>
	<Input invalid placeholder="me@example.com" />
	<Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

Helper Text Accessibility

Field with helper text to provide additional context.

<Field.Root>
	<Field.Label>Email</Field.Label>
	<Input placeholder="me@example.com" />
	<Field.HelperText>This is a helper text</Field.HelperText>
</Field.Root>

Native Select Accessibility

Field with a NativeSelect element.

<Field.Root>
	<Field.Label>Native Select</Field.Label>
	<NativeSelect>
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
	</NativeSelect>
</Field.Root>

Textarea Accessibility

Field with a Textarea input.

<Field.Root>
	<Field.Label>Message</Field.Label>
	<Textarea placeholder="Enter your message here" />
</Field.Root>

Props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the component is disabled.
`invalid`	`boolean`	`false`	Whether the component is in an invalid state.
`required`	`boolean`	`false`	-
`readOnly`	`boolean`	`false`	-
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.