Huesos
Style
Guide

Repositoire

GitHub

Preview

Fieldset

If either $disable-fieldset: true or .fieldset--disabled class is added, visually hides the fielset box.

On any case, the <legend> is set to a minititle of $fieldset-font-size.

Example

<fieldset>
    <legend>Fieldset legend</legend>
    <div class="form-item">
        <label for="item">This is my label</label>
        <input type="email" id="item" placeholder="Email" />
    </div>
    <div class="form-item">
        <label for="item2">This is a second label</label>
        <input type="text" id="item2" value="Text" />
    </div>
</fieldset>

<fieldset class="fieldset--disabled">
    <legend>Fieldset legend</legend>
    <div class="form-item">
        <label for="item">This is my label</label>
        <input type="email" id="item" placeholder="Email" />
    </div>
    <div class="form-item">
        <label for="item2">This is a second label</label>
        <input type="text" id="item2" value="Text" />
    </div>
</fieldset>

Assets

  • Filesystem Path: src/components/forms/fieldset/_fieldset.scss
  • Size: 623 Bytes 
  • 
@if $disable-fieldset {
	fieldset {
		margin-right:0;
		margin-left:0;
		border: none;
		padding: 0;
		legend {
			margin-bottom: $spacer;
			@include minititle($fieldset-font-size);
		}
	}
} @else {
	fieldset {
		margin-right:0;
		margin-left:0;
		@include ritmo-borders($input-border-width, 4);
		border-color: $input-border-color;
		border-radius: $form-border-radius;
		legend {
			@include minititle($fieldset-font-size);
		}
	}
	fieldset.fieldset--disabled {
		margin-right:0;
		margin-left:0;
		border: none;
		padding: 0;
		legend {
			margin-bottom: $spacer;
			@include minititle($fieldset-font-size);
		}
	}
}