NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Fieldset

import Fieldset from '@concur/nui-widgets/lib/Forms/Fieldset';

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>
                    <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>
                    <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>
                    <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 />
            </FormGroup>
        </Col>
        <Col md={4}
            sm={12}
            xs={12}>
            <FormGroup>
                <ControlLabel>Comments</ControlLabel>
                <FormControl />
            </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>
                    <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>
                    <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>
                    <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 />
            </FormGroup>
        </Col>
        <Col md={4}
            sm={12}
            xs={12}>
            <FormGroup>
                <ControlLabel>Comments</ControlLabel>
                <FormControl />
            </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>
                    <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>
                    <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>
                    <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 />
            </FormGroup>
        </Col>
        <Col md={4}
            sm={12}
            xs={12}>
            <FormGroup>
                <ControlLabel>Comments</ControlLabel>
                <FormControl />
            </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>
                    <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>
                    <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>
                    <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 />
            </FormGroup>
        </Col>
        <Col md={4}
            sm={12}
            xs={12}>
            <FormGroup>
                <ControlLabel>Comments</ControlLabel>
                <FormControl />
            </FormGroup>
        </Col>
    </Row>
</Fieldset>

ReadOnly State

ReadOnly is not a supported state for the Fieldset component.

Usage

Properties

Property Type Default Description
legend Node 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. It also disables any inputs, links, buttons or select controls within that fieldset by setting appropriate HTML attributes, i.e. disabled or aria-disabled, on them.
formId String   Relates the fieldset to the parent form based on id.
hideLegend Boolean false Set to true to hide the fieldset legend. Hiding the legend only hides is visually – it is still used for accessibility reasons.
id String   Sets the id attribute on the <fieldset> element.
muted Boolean false Set to true to use muted fieldset styling.
name String   Sets the name attribute on the <fieldset> element.