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>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Seat Section</ControlLabel>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Special Meals</ControlLabel>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </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>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Seat Section</ControlLabel>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Special Meals</ControlLabel>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </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>
                <Dropdown className='cnqr-full-width' >
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Seat Section</ControlLabel>
                <Dropdown className='cnqr-full-width' >
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Special Meals</ControlLabel>
                <Dropdown className='cnqr-full-width' >
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </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>

Disabled State

Use the disabled property to disable the Fieldset component. A disabled element is unusable and un-clickable.

<Fieldset
    disabled
    legend='Legend'>
    <Row>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Seat</ControlLabel>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Seat Section</ControlLabel>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </FormGroup>
        </Col>
        <Col md={4}
            sm={6}
            xs={12}>
            <FormGroup>
                <ControlLabel>Special Meals</ControlLabel>
                <Dropdown className='cnqr-full-width'>
                    <Dropdown.Option value='select'>Select Item</Dropdown.Option>
                    <Dropdown.Option value='item1'>Item 1</Dropdown.Option>
                    <Dropdown.Option value='item2'>Item 2</Dropdown.Option>
                </Dropdown>
            </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>

ReadOnly State

ReadOnly is not a supported state for the Fieldset component.

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.