Fieldset

Display a collection of related information in a single unit.

Default

The Evil Rabbit Jumped over the Fence

Code Editor

<fs.Fieldset>
  <fs.Content>
    <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
    <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
  </fs.Content>
  <fs.Footer>
    <fs.Footer.Status>The Evil Rabbit Jumped over the Fence</fs.Footer.Status>
    <fs.Footer.Actions>
      <Button small>Action</Button>
    </fs.Footer.Actions>
  </fs.Footer>
</fs.Fieldset>

<fs.Fieldset>
  <fs.Content>
    <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
    <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
  </fs.Content>
  <fs.Footer>
    <fs.Footer.Status>The Evil Rabbit Jumped over the Fence</fs.Footer.Status>
    <fs.Footer.Actions>
      <Button small>Action</Button>
    </fs.Footer.Actions>
  </fs.Footer>
</fs.Fieldset>

Tabs

The Evil Rabbit Jumped over the Fence

Code Editor

<fs.Tabs tabs={['One', 'Two']}>
  <fs.Fieldset>
    <fs.Content>
      <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
      <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
    </fs.Content>
    <fs.Footer>
      <fs.Footer.Status>
        The Evil Rabbit Jumped over the Fence
      </fs.Footer.Status>
      <fs.Footer.Actions>
        <Button small>Action</Button>
      </fs.Footer.Actions>
    </fs.Footer>
  </fs.Fieldset>

  <fs.Fieldset>
    <fs.Content>
      <fs.Title>The Fence Jumped over The Evil Rabbit</fs.Title>
      <fs.Subtitle>The Fence Jumped over The Evil Rabbit</fs.Subtitle>
    </fs.Content>
    <fs.Footer>
      <fs.Footer.Status>
        The Fence Jumped over The Evil Rabbit
      </fs.Footer.Status>
      <fs.Footer.Actions>
        <Button small success>Action</Button>
      </fs.Footer.Actions>
    </fs.Footer>
  </fs.Fieldset>
</fs.Tabs>

<fs.Tabs tabs={['One', 'Two']}>
  <fs.Fieldset>
    <fs.Content>
      <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
      <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
    </fs.Content>
    <fs.Footer>
      <fs.Footer.Status>
        The Evil Rabbit Jumped over the Fence
      </fs.Footer.Status>
      <fs.Footer.Actions>
        <Button small>Action</Button>
      </fs.Footer.Actions>
    </fs.Footer>
  </fs.Fieldset>
  <fs.Fieldset>
    <fs.Content>
      <fs.Title>The Fence Jumped over The Evil Rabbit</fs.Title>
      <fs.Subtitle>The Fence Jumped over The Evil Rabbit</fs.Subtitle>
    </fs.Content>
    <fs.Footer>
      <fs.Footer.Status>
        The Fence Jumped over The Evil Rabbit
      </fs.Footer.Status>
      <fs.Footer.Actions>
        <Button small success>Action</Button>
      </fs.Footer.Actions>
    </fs.Footer>
  </fs.Fieldset>
</fs.Tabs>

Error

The Evil Rabbit Jumped over the Fence

Code Editor

<fs.Fieldset>
  <fs.Content>
    <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
    <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
  </fs.Content>
  <fs.Footer>
    <fs.Footer.Status>
      <fs.ErrorText>An error has occurred.</fs.ErrorText>
    </fs.Footer.Status>
    <fs.Footer.Actions>
      <Button small disabled>Action</Button>
    </fs.Footer.Actions>
  </fs.Footer>
</fs.Fieldset>

<fs.Fieldset>
  <fs.Content>
    <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
    <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
  </fs.Content>
  <fs.Footer>
    <fs.Footer.Status>
      <fs.ErrorText>An error has occurred.</fs.ErrorText>
    </fs.Footer.Status>
    <fs.Footer.Actions>
      <Button small disabled>Action</Button>
    </fs.Footer.Actions>
  </fs.Footer>
</fs.Fieldset>

Disabled

The Evil Rabbit Jumped over the Fence

Code Editor

<fs.Fieldset disabled>
  <fs.Content>
    <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
    <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
  </fs.Content>
  <fs.Footer>
    <fs.Footer.Status>The Evil Rabbit Jumped over the Fence</fs.Footer.Status>
    <fs.Footer.Actions>
      <Button small>Action</Button>
    </fs.Footer.Actions>
  </fs.Footer>
</fs.Fieldset>

<fs.Fieldset disabled>
  <fs.Content>
    <fs.Title>The Evil Rabbit Jumped over the Fence</fs.Title>
    <fs.Subtitle>The Evil Rabbit Jumped over the Fence</fs.Subtitle>
  </fs.Content>
  <fs.Footer>
    <fs.Footer.Status>The Evil Rabbit Jumped over the Fence</fs.Footer.Status>
    <fs.Footer.Actions>
      <Button small>Action</Button>
    </fs.Footer.Actions>
  </fs.Footer>
</fs.Fieldset>