ShardsUI is in beta. APIs may change before 1.0.

Field

A control with label and error.

Shown to everyone in the group

<script lang="ts">
  import { Field } from '@shardsui/svelte/field'
</script>

<Field.Root class="flex w-full max-w-64 flex-col items-start gap-1">
  <Field.Label class="text-sm font-semibold text-gray-900">Group name</Field.Label>
  <Field.Control
    required
    placeholder="design-team"
    class="h-8 w-full rounded-md border border-gray-200 px-2 text-sm font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-gray-950 any-pointer-coarse:text-base"
  />
  <Field.Error class="text-sm text-red-800" match="valueMissing">
    Please enter a group name
  </Field.Error>

  <Field.Description class="text-sm text-gray-600">
    Shown to everyone in the group
  </Field.Description>
</Field.Root>

Anatomy

<script>
  import { Field } from '@shardsui/svelte/field'
</script>

<Field.Root>
  <Field.Label />
  <Field.Control />
  <Field.Description />
  <Field.Item />
  <Field.Error />
  <Field.Validity />
</Field.Root>

API reference

Root

Groups a control with its label, description and error. Renders a <div> element.

PropTypeDefault
AttributeDescription
data-disabledPresent when the field is disabled.
data-touchedPresent when the field has been touched.
data-dirtyPresent when the field's value has changed.
data-filledPresent when the field is filled.
data-focusedPresent when the field control is focused.
data-validPresent when the field is valid.
data-invalidPresent when the field is invalid.

Label

An accessible label, associated with the field control automatically. Renders a <label> element.

PropTypeDefault
AttributeDescription
data-disabledPresent when the field or item is disabled.
data-touchedPresent when the field has been touched.
data-dirtyPresent when the field's value has changed.
data-filledPresent when the field is filled.
data-focusedPresent when the field control is focused.
data-validPresent when the field is valid.
data-invalidPresent when the field is invalid.

Control

The form control to label and validate. Renders an <input> element.

PropTypeDefault

Other standard <input> props (type, required, pattern, placeholder, etc.) pass through, as do <textarea> props (rows, cols, wrap) when as="textarea".

AttributeDescription
data-disabledPresent when the field or the control is disabled.
data-touchedPresent when the field has been touched.
data-dirtyPresent when the field's value has changed.
data-filledPresent when the field is filled.
data-focusedPresent when the field control is focused.
data-validPresent when the field is valid.
data-invalidPresent when the field is invalid.

Description

Additional information about the field, added to the control's accessible description. Renders a <p> element.

PropTypeDefault
AttributeDescription
data-disabledPresent when the field or item is disabled.
data-touchedPresent when the field has been touched.
data-dirtyPresent when the field's value has changed.
data-filledPresent when the field is filled.
data-focusedPresent when the field control is focused.
data-validPresent when the field is valid.
data-invalidPresent when the field is invalid.

Item

Groups one item of a checkbox or radio group with its own label and description. Renders a <div> element.

PropTypeDefault
AttributeDescription
data-disabledPresent when the field or item is disabled.
data-touchedPresent when the field has been touched.
data-dirtyPresent when the field's value has changed.
data-filledPresent when the field is filled.
data-focusedPresent when the field control is focused.
data-validPresent when the field is valid.
data-invalidPresent when the field is invalid.

Error

An error message shown when the field fails validation. While visible, it is part of the control's accessible description. Renders a <div> element.

PropTypeDefault

Without children, the part renders the current error message, or a <ul> of them when there is more than one.

AttributeDescription
data-disabledPresent when the field is disabled.
data-touchedPresent when the field has been touched.
data-dirtyPresent when the field's value has changed.
data-filledPresent when the field is filled.
data-focusedPresent when the field control is focused.
data-validPresent when the field is valid.
data-invalidPresent when the field is invalid.
data-starting-stylePresent when the error message is animating in.
data-ending-stylePresent when the error message is animating out.

Validity

Renders custom content from the field's validity state. Doesn't render its own HTML element.

PropTypeDefault