Field

Combine labels, controls, and help text to compose accessible form fields. Responsive fields put the label beside the control when the field itself is at least 480vp wide — no breakpoints.

Usage

SFieldSet() {
  SFieldLegend({ text: 'Profile' })
  SFieldDescription({ text: 'Fill in your public profile.' })
  SFieldGroup() {
    SField() {
      SFieldLabel({ text: 'Full name' })
      SInput({ placeholder: 'Evil Rabbit', value: this.name!! })
      SFieldDescription({ text: 'This appears on invoices and emails.' })
    }
    SField({ invalid: this.username.length < 3 }) {
      SFieldLabel({ text: 'Username' })
      SInput({ value: this.username!! })
      SFieldError({ text: this.username.length < 3 ? 'At least 3 characters.' : '' })
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Responsive

Resize the window (or narrow the demo) — the field measures its own width.

// label beside the control from 480vp of field width, stacked below
SField({ orientation: 'responsive' }) {
  SFieldContent() {
    SFieldLabel({ text: 'Name' })
    SFieldDescription({ text: 'Provide your full name for identification.' })
  }
  SInput({ placeholder: 'Evil Rabbit' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

Horizontal

Checkbox, switch and label in a row.

SField({ orientation: 'horizontal' }) {
  SCheckbox({ checked: this.sync!! })
  SFieldLabel({ text: 'Sync across devices' })
}
SField({ orientation: 'horizontal' }) {
  SFieldContent() {
    SFieldLabel({ text: 'Multi-factor authentication' })
    SFieldDescription({ text: 'Enable MFA to secure your account.' })
  }
  SSwitch({ checked: this.mfa!! })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SField

shadcn-vue Field: a label, control, description and error laid out together.

• vertical: stacked (flex-col gap-3).
• horizontal: in a row (flex-row items-center gap-3); SFieldLabel / SFieldContent / text controls share the free width.
• responsive (default): measures its own width — beside each other from 480vp, stacked below (the container-query equivalent of shadcn's @md/field-group:flex-row).

Prop	Type	Default	Description
orientation	FieldOrientation FieldOrientation = 'vertical' | 'horizontal' | 'responsive'	'responsive'
invalid	boolean	false	Error look: SFieldLabel turns destructive, SInput / STextarea show the invalid border.
disabled	boolean	false	Disabled look for the label (opacity 50%).

Slots: children (trailing closure)

SFieldLabel

Label of a field. Turns destructive when the field is invalid; fills the free width in horizontal fields.

Prop	Type	Default	Description
text	ResourceStr	''
required	boolean	false

SFieldContent

Groups a label and description next to a control (flex flex-1 flex-col gap-1.5).

Slots: children (trailing closure)

SFieldDescription

Helper text (text-muted-foreground text-sm).

Prop	Type	Default	Description
text	ResourceStr	''

SFieldError

Validation message (text-destructive text-sm). Renders nothing while text is empty.

Prop	Type	Default	Description
text	string	''

SFieldGroup

Stack of fields (flex w-full flex-col gap-7).

Slots: children (trailing closure)

SFieldSet

Semantic group of fields with an optional SFieldLegend (flex flex-col gap-6).

Slots: children (trailing closure)

SFieldLegend

Title of an SFieldSet: legend = text-base font-medium, label = text-sm font-medium.

Prop	Type	Default	Description
text	ResourceStr	''
variant	FieldLegendVariant FieldLegendVariant = 'legend' | 'label'	'legend'

SFieldSeparator

Horizontal rule between field groups.

No props.