Field

A component for organizing related form elements into a cohesive unit.

Label

This is a helper text

Anatomy

Usage

Input

<script>
  import {Field} from 'ui-ingredients';
</script>

<Field.Root>
  <Field.Label>
    Label
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Input />
  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

Select

<script>
  import {Field} from 'ui-ingredients';
</script>

<Field.Root>
  <Field.Label>
    Label
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Select />
  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

Textarea

<script>
  import {Field} from 'ui-ingredients';
</script>

<Field.Root>
  <Field.Label>
    Label
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Textarea autoResize />
  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

API Reference

Root

Prop	Default	Description
`disabled`		`boolean` Whether the field is disabled.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root: string; label: string; control: string; errorText: string; helperText: string; }` The ids of the field parts.
`invalid`		`boolean` Whether the field is invalid.
`readOnly`		`boolean` Whether the field is read-only.
`required`		`boolean` Whether the field is required.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	root
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field

ErrorText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	error-text
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field

HelperText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	helper-text
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field

Input

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	input
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	label
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field

RequiredIndicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	required-indicator
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field

Select

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	select
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field

Textarea

Prop	Default	Description
`autoResize`		`boolean` Automatically resize the textarea based on the content length.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is invalid.
`data-part`	textarea
`data-readonly`	Present when the field is readonly.
`data-required`	Present when the field is required.
`data-scope`	field