Fieldset

Display a collection of related information in a single unit.

Default

Code Editor
<fs.Fieldset>
<fs.Content>
<fs.Title>The Holland Lop Jumped over the Fence</fs.Title>
<fs.Subtitle>The Holland Lop Jumped over the Fence</fs.Subtitle>
</fs.Content>
<fs.Footer>
<fs.Footer.Status>The Holland Lop Jumped over the Fence</fs.Footer.Status>
<fs.Footer.Actions>
<Button size="small">Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>

Tabs

Code Editor
<fs.Tabs tabs={['One', 'Two']}>
<fs.Fieldset>
<fs.Content>
<fs.Title>The Holland Lop Jumped over the Fence</fs.Title>
<fs.Subtitle>The Holland Lop Jumped over the Fence</fs.Subtitle>
</fs.Content>
<fs.Footer>
<fs.Footer.Status>
The Holland Lop Jumped over the Fence
</fs.Footer.Status>
<fs.Footer.Actions>
<Button size="small">Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>
<fs.Fieldset>
<fs.Content>
<fs.Title>The Fence Jumped over The Holland Lop</fs.Title>
<fs.Subtitle>The Fence Jumped over The Holland Lop</fs.Subtitle>
</fs.Content>
<fs.Footer>
<fs.Footer.Status>
The Fence Jumped over The Holland Lop
</fs.Footer.Status>
<fs.Footer.Actions>
<Button size="small" type="success">Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>
</fs.Tabs>

Error

Code Editor
<fs.Fieldset>
<fs.Content>
<fs.Title>The Holland Lop Jumped over the Fence</fs.Title>
<fs.Subtitle>The Holland Lop 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 size="small" disabled>Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>

Disabled

Code Editor
<fs.Fieldset disabled>
<fs.Content>
<fs.Title>The Holland Lop Jumped over the Fence</fs.Title>
<fs.Subtitle>The Holland Lop Jumped over the Fence</fs.Subtitle>
</fs.Content>
<fs.Footer>
<fs.Footer.Status>The Holland Lop Jumped over the Fence</fs.Footer.Status>
<fs.Footer.Actions>
<Button size="small">Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>

Disabled Content Only

Code Editor
<fs.Fieldset>
<fs.Content disabled>
<fs.Title>The Holland Lop Jumped over the Fence</fs.Title>
<fs.Subtitle>The Holland Lop Jumped over the Fence</fs.Subtitle>
</fs.Content>
<fs.Footer>
<fs.Footer.Status>The Holland Lop Jumped over the Fence</fs.Footer.Status>
<fs.Footer.Actions>
<Button size="small">Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>

Disabled Footer Only

Code Editor
<fs.Fieldset>
<fs.Content>
<fs.Title>The Holland Lop Jumped over the Fence</fs.Title>
<fs.Subtitle>The Holland Lop Jumped over the Fence</fs.Subtitle>
</fs.Content>
<fs.Footer disabled>
<fs.Footer.Status>The Holland Lop Jumped over the Fence</fs.Footer.Status>
<fs.Footer.Actions>
<Button size="small">Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>

Highlight Footer

Code Editor
<fs.Fieldset>
<fs.Content disabled>
<fs.Title>The Holland Lop Jumped over the Fence</fs.Title>
<fs.Subtitle>The Holland Lop Jumped over the Fence</fs.Subtitle>
</fs.Content>
<fs.Footer highlight>
<fs.Footer.Status>The Holland Lop Jumped over the Fence</fs.Footer.Status>
<fs.Footer.Actions>
<Button size="small">Action</Button>
</fs.Footer.Actions>
</fs.Footer>
</fs.Fieldset>