Beta, expect API change, and bugs. Hit one? Tell us.

Skip to content

Field

A control with label and error.

Shown to everyone in the group

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

<template>
  <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>
</template>

Anatomy

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

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

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 slot content, 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