Fieldset

Component Documentation

matestack core component: Fieldset

Show specs

Use Fieldset to group several <input> and <label> tags.

Parameters

<fieldset> can take two optional configuration params and optional content.

Optional configuration

id (optional)

Expects a string with all ids the details tag should have.

class (optional)

Expects a string with all classes the details tag should have.

Disabled (optional)

Set disabled attribute on <fieldset> to disable all controls inside the <fieldset>

Example 1

 fieldset do
    legend text: 'Your Inputs for Personal details'
    label text: 'Personal Detail'
    input
  end
<fieldset>
  <legend>Your Inputs for Personal details</legend>
  <label>Personal Detail</label>
  <input>
</fieldset>

Example 2

fieldset id: 'foo', class: 'bar' do
  legend id: 'baz', text: 'Your Inputs for Personal details'
  label text: 'Personal Detail'
  input 
end
<fieldset id="foo" class="bar">
  <legend id="baz">Your Inputs for Personal details</legend>
  <label>Personal Detail</label>
  <input>
</fieldset>

Example 3

With Disabled Attribute

fieldset disabled: true do
  legend text: 'input legend'
  input
end
<fieldset disabled="disabled">
  <legend>input legend</legend>
  <input>
</fieldset>