Skip to content

Fieldset Module ​

The Fieldset module provides consistent styling for <fieldset> and <legend> elements, including padding, border, radius, and legend font weight.

Example Fieldset
Disabled Fieldset

Signature:

scss
@mixin use-fieldset();

Example:

scss
@include termeh.use-fieldset();

Module:

This module is registered as form-fieldset in the presented modules.

Dependencies

Fieldset module uses the following Termeh global var():

ComponentTypeUsageDefault
base → separatorColorFallback border colornull
radius → normalNumberDefault fieldset border radiusnull
gap → macroNumberDefault inner padding and bottom margin for fieldset1.6em
input → legendStringLegend element font weightnormal
input → borderColorFieldset border colorFALLBACK

Modifiers ​

  • .is-disabled / :disabled → disables all controls within the fieldset