Fieldset
import { Fieldset } from '@concur/nui-widgets';Fieldsets are used to give semantic meaning to a group of elements inside a form (e.g. Billing or Shipping Address). Grouping fields together into a fieldset also provides styling and accessibility benefits.
Examples
Default
<Fieldset legend='Legend'>
<Row>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Seat</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Seat Section</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Special Meals</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={8}
sm={12}
xs={12}>
<FormGroup>
<ControlLabel>Preferred Departure Airport</ControlLabel>
<FormControl style={{
width: '100%'
}} />
</FormGroup>
</Col>
<Col md={4}
sm={12}
xs={12}>
<FormGroup>
<ControlLabel>Comments</ControlLabel>
<FormControl style={{
width: '100%'
}} />
</FormGroup>
</Col>
</Row>
</Fieldset>Classic
Use the classicFieldset property to style the fieldset in a more traditional manner.
<Fieldset classicFieldset legend='Legend'>
<Row>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Seat</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Seat Section</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Special Meals</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={8}
sm={12}
xs={12}>
<FormGroup>
<ControlLabel>Preferred Departure Airport</ControlLabel>
<FormControl style={{
width: '100%'
}} />
</FormGroup>
</Col>
<Col md={4}
sm={12}
xs={12}>
<FormGroup>
<ControlLabel>Comments</ControlLabel>
<FormControl style={{
width: '100%'
}} />
</FormGroup>
</Col>
</Row>
</Fieldset>Muted
Use the muted property to style the fieldset with a shaded background.
<Fieldset legend='Legend' muted>
<Row>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Seat</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Seat Section</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
<Col md={4}
sm={6}
xs={12}>
<FormGroup>
<ControlLabel>Special Meals</ControlLabel>
<FormControl className='cnqr-full-width' componentClass='select'>
<option value='select'>Select Item</option>
<option value='item1'>Item 1</option>
<option value='item2'>Item 2</option>
</FormControl>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={8}
sm={12}
xs={12}>
<FormGroup>
<ControlLabel>Preferred Departure Airport</ControlLabel>
<FormControl style={{
width: '100%'
}} />
</FormGroup>
</Col>
<Col md={4}
sm={12}
xs={12}>
<FormGroup>
<ControlLabel>Comments</ControlLabel>
<FormControl style={{
width: '100%'
}} />
</FormGroup>
</Col>
</Row>
</Fieldset>Usage
Properties
| Property | Type | Default | Description |
|---|---|---|---|
legend | String | Required | Text placed at the top of the fieldset to identify group content. |
children | Node | A collection of elements that are to be contained within the fieldset. | |
classicFieldset | Boolean | false | Set to true to use classic fieldset styling. |
className | String | Any custom classes to add to the <fieldset> element. | |
disabled | Boolean | false | Sets the disabled attribute on the <fieldset> element. |
formId | String | Relates the fieldset to the parent form based on id. | |
id | String | Sets the id attribute on the <fieldset> element. | |
isLegendVisible | Boolean | true | Set to false to hide the fieldset legend. Hiding the legend only hides is visually – it is still used for accessibility reasons. |
muted | Boolean | false | Set to true to use muted fieldset styling. |
name | String | Sets the name attribute on the <fieldset> element. |