shadcn-templ 2.0 beta. Switch to templUI v1
1.7k
New

Field

Previous Next

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

package examples import (

Installation

shadcn-templ add field

Usage

import "github.com/axadrn/shadcn-templ/v2/components/field"
@field.Set() {	@field.Legend() {		Profile	}	@field.Description() {		This appears on invoices and emails.	}	@field.Group() {		@field.Field() {			@field.Label(field.LabelProps{For: "name"}) {				Full name			}			@input.Input(input.Props{ID: "name", Placeholder: "Axel Adrian"})			@field.Description() {				This appears on invoices and emails.			}		}		@field.Field() {			@field.Label(field.LabelProps{For: "username"}) {				Username			}			@input.Input(input.Props{ID: "username", Attributes: templ.Attributes{"aria-invalid": "true"}})			@field.Error() {				Choose another username.			}		}		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {			@switchcomp.Switch(switchcomp.Props{ID: "newsletter"})			@field.Label(field.LabelProps{For: "newsletter"}) {				Subscribe to the newsletter			}		}	}}

Composition

Field

A single control with label, helper text, and validation.

field.Field├── field.Label├── input.Input / textarea.Textarea / switchcomp.Switch / select.Select├── field.Description└── field.Error

FieldGroup

Related fields in one group. Use field.Separator between sections when needed.

field.Group├── field.Field│   ├── field.Label│   ├── input.Input / textarea.Textarea / switchcomp.Switch / select.Select│   ├── field.Description│   └── field.Error├── field.Separator└── field.Field    ├── field.Label    └── input.Input / textarea.Textarea / switchcomp.Switch / select.Select

FieldSet

Semantic grouping with a legend and description, usually containing a field.Group.

field.Set├── field.Legend├── field.Description└── field.Group    ├── field.Field    │   ├── field.Label    │   ├── input.Input / textarea.Textarea / switchcomp.Switch / select.Select    │   ├── field.Description    │   └── field.Error    └── field.Field        ├── field.Label        └── input.Input / textarea.Textarea / switchcomp.Switch / select.Select

Anatomy

The Field family is designed for composing accessible forms. A typical field is structured as follows:

@field.Field() {	@field.Label(field.LabelProps{For: "input-id"}) {		Label	}	// Input, Select, Switch, etc.	@field.Description() {		Optional helper text.	}	@field.Error() {		Validation message.	}}
  • Field is the core wrapper for a single field.
  • field.Content is a flex column that groups label and description. Not required if you have no description.
  • Wrap related fields with field.Group, and use field.Set with field.Legend for semantic grouping.

Form

Fields compose with plain HTML forms, the controls submit their native values.

Input

Choose a unique username for your account.

Must be at least 8 characters long.

package examples import (

Textarea

Share your thoughts about our service.

package examples import (

Select

Select your department or area of work.

package examples import (

Slider

Price Range

Set your budget range ($200 - 800).

package examples import (

Fieldset

Address Information

We need your address to deliver your order.

package examples import (

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

package examples import (

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

package examples import (

Switch

package examples import (

Choice Card

Wrap field.Field components inside field.Label to create selectable field groups. This works with radio.Radio, checkbox.Checkbox and switchcomp.Switch components.

Compute Environment

Select the compute environment for your cluster.

package examples import (

Field Group

Stack field.Field components with field.Group. Add field.Separator to divide them.

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Get notified when tasks you've created have updates. Manage tasks

package examples import (

Responsive Layout

  • Vertical fields: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
  • Horizontal fields: Set Orientation: field.OrientationHorizontal on field.Field to align the label and control side-by-side. Pair with field.Content to keep descriptions aligned.
  • Responsive fields: Set Orientation: field.OrientationResponsive for automatic column layouts inside container-aware parents. Apply @container/field-group classes on field.Group to switch orientations at specific breakpoints.
Profile

Fill in your profile information.

Provide your full name for identification

package examples import (

Validation and Errors

  • Add data-invalid to field.Field to switch the entire block into an error state.
  • Add aria-invalid on the input itself for assistive technologies.
  • Render field.Error immediately after the control or inside field.Content to keep error messages aligned with the field.
@field.Field(field.Props{Attributes: templ.Attributes{"data-invalid": "true"}}) {	@field.Label(field.LabelProps{For: "email"}) {		Email	}	@input.Input(input.Props{ID: "email", Type: "email", Attributes: templ.Attributes{"aria-invalid": "true"}})	@field.Error() {		Enter a valid email address.	}}

Accessibility

  • field.Set and field.Legend keep related controls grouped for keyboard and assistive tech users.
  • Field outputs role="group" so nested controls inherit labeling from field.Label and field.Legend when combined.
  • Apply field.Separator sparingly to ensure screen readers encounter clear section boundaries.

API Reference

FieldSet

Container that renders a semantic fieldset with spacing presets.

Prop Type Default
Class string - 
@field.Set() {	@field.Legend() {		Delivery	}	@field.Group() {		// Fields	}}

FieldLegend

Legend element for a field.Set. Switch to the label variant to align with label sizing.

Prop Type Default
Variant LegendVariantLegend | LegendVariantLabel LegendVariantLegend
Class string - 
@field.Legend(field.LegendProps{Variant: field.LegendVariantLabel}) {	Notification Preferences}

The field.Legend has two variants: legend and label. The label variant applies label sizing and alignment. Handy if you have nested field.Set.

FieldGroup

Layout wrapper that stacks field.Field components and enables container queries for responsive orientations.

Prop Type Default
Class string - 
@field.Group(field.GroupProps{Class: "@container/field-group flex flex-col gap-6"}) {	@field.Field() {		// ...	}	@field.Field() {		// ...	}}

Field

The core wrapper for a single field. Provides orientation control and spacing; mark states with data-invalid / data-disabled attributes.

Prop Type Default
Orientation OrientationVertical | OrientationHorizontal | OrientationResponsive OrientationVertical
Class string - 
@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {	@field.Label(field.LabelProps{For: "remember"}) {		Remember me	}	@switchcomp.Switch(switchcomp.Props{ID: "remember"})}

FieldContent

Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.

Prop Type Default
Class string - 
@field.Field() {	@checkbox.Checkbox(checkbox.Props{ID: "notifications"})	@field.Content() {		@field.Label(field.LabelProps{For: "notifications"}) {			Notifications		}		@field.Description() {			Email, SMS, and push options.		}	}}

FieldLabel

Label styled for both direct inputs and nested field.Field children.

Prop Type Default
For string -
Class string - 
@field.Label(field.LabelProps{For: "email"}) {	Email}

FieldTitle

Renders a title with label styling inside field.Content.

Prop Type Default
Class string - 
@field.Content() {	@field.Title() {		Enable Touch ID	}	@field.Description() {		Unlock your device faster.	}}

FieldDescription

Helper text slot that automatically balances long lines in horizontal layouts.

Prop Type Default
Class string - 
@field.Description() {	We never share your email with anyone.}

FieldSeparator

Visual divider to separate sections inside a field.Group. Accepts optional inline content.

Prop Type Default
Class string - 
@field.Separator() {	Or continue with}

FieldError

Accessible error container for validation messages.

Prop Type Default
Class string - 
@field.Error() {	Choose another username.}
EmptyHover Card