Fieldset

Source: https://dripyard.com/docs/dripyard-base/components/drupal/fieldset

Theme: dripyard-base

A form grouping component that provides semantic structure for related form elements with a styled legend and customizable appearance.

Overview

The fieldset component is a fundamental form element used to group related form controls together. It features a legend title, support for required field indicators, error states, and consistent styling that integrates with Drupal's form system.

Usage

{% embed 'dripyard_base:fieldset' with {
  legend_title: 'Personal Information',
  required: true
} %}
  {% block fieldset_content %}
    
    
      First Name
      
    
    
      Last Name
      
    
  {% endblock %}
{% endembed %}

Props

Slots

CSS Custom Properties

The component uses the following CSS variables for customization:

• --fieldset-border-color - Sets the border color around the fieldset
• --fieldset-border-width - Controls the thickness of the fieldset border
• --fieldset-border-radius - Controls the corner rounding of the fieldset
• --fieldset-background-color - Sets the background color of the fieldset
• --fieldset-text-color - Controls the text color within the fieldset
• --fieldset-legend-text-color - Sets the color of the legend text
• --fieldset-padding-block - Controls the vertical padding inside the fieldset
• --fieldset-padding-inline - Controls the horizontal padding inside the fieldset

Error States

The component automatically handles error states:

.fieldset.error {
  --fieldset-border-color: var(--theme-color-error);
  --fieldset-border-width: 2px;
}

When an error class is applied, the fieldset displays with error styling including a thicker, error-colored border.

Accessibility Features

Semantic Structure

• Native fieldset: Uses proper and elements for semantic form grouping
• Screen reader support: Legend provides context for grouped form controls
• Keyboard navigation: Standard tab order through form elements

Required Field Indicators

• Visual indicators: SVG-based required markers using CSS masks
• Screen reader compatible: Mask images prevent screen readers from announcing decorative content
• Color independence: Required indicators work in high contrast mode

Error Handling

• Visual feedback: Clear error state styling with enhanced borders
• Contextual grouping: Error states apply to the entire related group of form elements

Related Components

• Details: For collapsible content grouping
• Form Elements: Input fields, textareas, selects that go inside fieldsets
• Form Wrapper: Parent form containers
• Validation Messages: Error and help text components

Examples

Basic Fieldset

{% embed 'dripyard_base:fieldset' with {
  legend_title: 'Contact Information'
} %}
  {% block fieldset_content %}
    
      Email Address
      
    
  {% endblock %}
{% endembed %}

Required Fieldset

{% embed 'dripyard_base:fieldset' with {
  legend_title: 'Required Information',
  required: true
} %}
  {% block fieldset_content %}
    
      Username
      
    
    
      Password
      
    
  {% endblock %}
{% endembed %}

Multiple Form Elements

{% embed 'dripyard_base:fieldset' with {
  legend_title: 'Address Details'
} %}
  {% block fieldset_content %}
    
      Street Address
      
    
    
      City
      
    
    
      State
      
        Select a state
        California
        New York
      
    
  {% endblock %}
{% endembed %}