Fieldset

Basic Usage

Preview

Personal Information

Please provide your basic contact details.

First Name *

Last Name *

Email *

Phone

Code

---
import Fieldset from '@uicg/cli/components/Fieldset/Fieldset.astro'
import Input from '@uicg/cli/components/Input/input.astro'
---

<Fieldset legend="Personal Information" description="Please provide your basic contact details.">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <Input label="First Name" placeholder="Enter your first name" required />
    <Input label="Last Name" placeholder="Enter your last name" required />
    <Input type="email" label="Email" placeholder="your.email@example.com" required />
    <Input type="tel" label="Phone" placeholder="+1 (555) 123-4567" />
  </div>
</Fieldset>

Intent Variants

Preview

Default Fieldset

Default input

Primary Fieldset

Primary input

Success Fieldset

Success input

Code

<Fieldset intent="default" legend="Default Fieldset">
  <Input label="Default input" placeholder="Default styling" />
</Fieldset>

<Fieldset intent="primary" legend="Primary Fieldset">
  <Input label="Primary input" placeholder="Primary styling" />
</Fieldset>

<Fieldset intent="success" legend="Success Fieldset">
  <Input label="Success input" placeholder="Success styling" />
</Fieldset>

Sizes

Small Fieldset

Compact spacing for dense forms

Small input

Medium Fieldset

Default spacing for most forms

Medium input

Large Fieldset

Generous spacing for prominent forms

Large input

States

Required Fieldset *

All fields in this group are required

Required field *

Disabled Fieldset

This fieldset is disabled

Disabled field

Background Fieldset

Subtle background for visual separation

Background field

Properties

Property	Type	Default	Description
legend	string	-	Legend text for the fieldset
description	string	-	Description text below the legend
intent	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'	Visual intent/state of the fieldset
size	'small' | 'medium' | 'large'	'medium'	Size variant affecting padding and spacing
disabled	boolean	false	Whether the fieldset is disabled
required	boolean	false	Whether the fieldset content is required (shows asterisk)
background	boolean	false	Whether to show a subtle background
class	string	-	Additional CSS classes to apply

Accessibility

The Fieldset component follows WCAG 2.1 AA guidelines:

Screen Reader Support

• Semantic HTML: Uses native <fieldset> and <legend> elements for proper structure
• Group Identification: Screen readers announce the legend when entering the fieldset
• Required Indicator: Visual and semantic indication of required fields

Keyboard Navigation

• Focus Management: Proper focus-within styling for keyboard navigation
• Disabled State: Prevents interaction when disabled

Visual Accessibility

• High Contrast: Meets WCAG contrast requirements in all color variants
• Focus Indicators: Clear focus rings for keyboard navigation
• Color Independence: Information not conveyed by color alone

ARIA Support

• Required Fields: Uses aria-label for required field indicators
• Disabled State: Properly communicates disabled state to assistive technology

Examples

Basic Contact Form

Contact Information

We'll use this information to reach out to you.

Full Name *

Email Address *

Phone Number

Company

Payment Information

Payment Details *

Cardholder Name *

Card Number *

Expiry Date *

CVV *

Settings Group

Notification Preferences

Choose how you'd like to be notified.

Email Frequency

SMS Notifications

Custom Message

<!-- Basic Usage -->
<Fieldset legend="Personal Information">
  <Input label="Name" placeholder="Enter your name" />
  <Input type="email" label="Email" placeholder="your@email.com" />
</Fieldset>

<!-- With Description and Intent -->
<Fieldset
  intent="primary"
  legend="Account Settings"
  description="Manage your account preferences"
  required
>
  <Input label="Username" required />
  <Input type="password" label="Password" required />
</Fieldset>

<!-- Large with Background -->
<Fieldset
  size="large"
  background
  legend="Profile Information"
  description="This information will be displayed publicly"
>
  <Input label="Display Name" />
  <Input type="textarea" label="Bio" rows="4" />
</Fieldset>

<!-- Disabled State -->
<Fieldset
  legend="Restricted Section"
  disabled
  description="You don't have permission to edit these fields"
>
  <Input label="Admin Setting" disabled />
</Fieldset>