Fieldset

The <Fieldset> component provides a grouping for a section of an HTML form. If the caption prop is specified, a respective <legend> element is rendered. A caption for the <legend> element is available via a prop by the same name. Learn more about the <fieldset> element group.

Default example

The <Fieldset> component is used with the <Form> component and a mix of other form related components as follows:

Basic form with grouped elements and a caption
<Form id="foo" name="bar">
    <Form.Fieldset caption='Basic form with grouped elements and a caption'>
        <Form.CheckboxGroup htmlFor='form_example_cb_3' label="Form checkbox">
            <Checkbox id="form_example_cb_1" name="form_example_cb_1" value="bar" />
            <Checkbox id="form_example_cb_2" name="form_example_cb_1" value="buzz" disabled />
            <Checkbox id="form_example_cb_3" name="form_example_cb_1" value="robin" checked />
        </Form.CheckboxGroup>
        <Form.RadioGroup htmlFor='form_example_radiogroup_1' label='Form radio group'>
            <Radio id="form_example_radiogroup_1" name="form_example_radiogroup_1" value="foo" checked />
            <Radio id="form_example_radiogroup_2" name="form_example_radiogroup_1" value="bar" />
            <Radio id="form_example_radiogroup_3" name="form_example_radiogroup_1" value="fizz" />
            <Radio id="form_example_radiogroup_4" name="form_example_radiogroup_1" value="buzz" />
        </Form.RadioGroup>
        <Form.Label text="Form select">
            <Select id="form_example_select_1" name="form_example_select_1" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
        </Form.Label>
        <Form.Label text="Form input field">
            <Form.Input id="form_example_input_1" name="form_example_input_1" value="buzz" placeholder="Standard input field" />
        </Form.Label>
        <Form.Section>
            <Form.Switch name='switch_example_1_default' label='Form default switch' />
            <Form.Switch name='switch_example_1_toggled' label='Form switch toggled on' toggled />
        </Form.Section>
        <Form.Label stacked block text="Form textarea with stacked label">
            <Form.Textarea id="form_example_textarea_1" name="form_example_textarea_1" placeholder="Standard textarea field" />
        </Form.Label>
        <Form.Section>
            <Form.Submit onClick={(e) => { e.preventDefault(); alert(`Hey pa', I was submitted; don't forget to collect form values!`)}} name='form_submit_example_1_default' text='Form Submit' />
            <Form.Reset name='form_reset_example_1_default' text='Form Reset' />
        </Form.Section>
    </Form.Fieldset>
</Form>

Applying a scheme / color palette

Using the scheme prop, you can give a fieldset and its respective child components a different color palette. Give it a try below, change the scheme prop from orange, red, and blue and see how the color scheme cascades.

Fieldset with red scheme
<Form id="bar" name="foo">
    <Form.Fieldset scheme='red' caption='Fieldset with red scheme'>
        <Form.CheckboxGroup htmlFor='form_example_2_cb_3' label="Form checkbox">
            <Checkbox id="form_example_2_cb_1" name="form_example_2_cb_1" value="bar" />
            <Checkbox id="form_example_2_cb_2" name="form_example_2_cb_1" value="buzz" disabled />
            <Checkbox id="form_example_2_cb_3" name="form_example_2_cb_1" value="robin" checked />
        </Form.CheckboxGroup>
        <Form.RadioGroup htmlFor='form_example_2_radiogroup_1' label='Form radio group'>
            <Radio id="form_example_2_radiogroup_1" name="form_example_2_radiogroup_1" value="foo" checked />
            <Radio id="form_example_2_radiogroup_2" name="form_example_2_radiogroup_1" value="bar" />
            <Radio id="form_example_2_radiogroup_3" name="form_example_2_radiogroup_1" value="fizz" />
            <Radio id="form_example_2_radiogroup_4" name="form_example_2_radiogroup_1" value="buzz" />
        </Form.RadioGroup>
        <Form.Label text="Form select">
            <Select id="form_example_2_select_1" name="form_example_2_select_1" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
        </Form.Label>
        <Form.Label text="Form input field">
            <Form.Input id="form_example_2_input_1" name="form_example_2_input_1" value="buzz" placeholder="Standard input field" />
        </Form.Label>
        <Form.Section>
            <Form.Switch name='switch_example_2_default' label='Form default switch' />
            <Form.Switch name='switch_example_2_toggled' label='Form switch toggled on' toggled />
        </Form.Section>
        <Form.Label stacked block text="Form textarea with stacked label">
            <Form.Textarea id="form_example_2_textarea_1" name="form_example_2_textarea_1" placeholder="Standard textarea field" />
        </Form.Label>
        <Form.Section>
            <Form.Submit onClick={(e) => { e.preventDefault(); alert(`Hey pa', I was submitted; don't forget to collect form values!`)}} name='form_submit_example_2_default' text='Form Submit' />
            <Form.Reset name='form_reset_example_2_default' text='Form Reset' />
        </Form.Section>
    </Form.Fieldset>
</Form>

Applying layout / flow changes

Using the stacked and block props, you can change the way the child components of a Fieldset are layed out, e.g. left-to-right, top-to-bottom; handy for various device/viewport sizes and product designs.

Fieldset with block and stacked UI components and a blue scheme
<Form id="fizz" name="buzz">
    <Form.Fieldset scheme='blue' stacked block caption='Fieldset with block and stacked UI components and a blue scheme'>
        <Form.CheckboxGroup htmlFor='form_example_3_cb_3' label="Form checkbox">
            <Checkbox id="form_example_3_cb_1" name="form_example_3_cb_1" value="bar" />
            <Checkbox id="form_example_3_cb_2" name="form_example_3_cb_1" value="buzz" disabled />
            <Checkbox id="form_example_3_cb_3" name="form_example_3_cb_1" value="robin" checked />
        </Form.CheckboxGroup>
        <Form.RadioGroup htmlFor='form_example_3_radiogroup_1' label='Form radio group'>
            <Radio id="form_example_3_radiogroup_1" name="form_example_3_radiogroup_1" value="foo" checked />
            <Radio id="form_example_3_radiogroup_2" name="form_example_3_radiogroup_1" value="bar" />
            <Radio id="form_example_3_radiogroup_3" name="form_example_3_radiogroup_1" value="fizz" />
            <Radio id="form_example_3_radiogroup_4" name="form_example_3_radiogroup_1" value="buzz" />
        </Form.RadioGroup>
        <Form.Label text="Form select">
            <Select id="form_example_3_select_1" name="form_example_3_select_1" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
        </Form.Label>
        <Form.Label text="Form input field">
            <Form.Input id="form_example_3_input_1" name="form_example_3_input_1" value="buzz" placeholder="Standard input field" />
        </Form.Label>
        <Form.Section>
            <Form.Switch name='switch_example_3_default' label='Form default switch' />
            <Form.Switch name='switch_example_3_toggled' label='Form switch toggled on' toggled />
        </Form.Section>
        <Form.Label stacked block text="Form textarea with stacked label">
            <Form.Textarea id="form_example_3_textarea_1" name="form_example_3_textarea_1" placeholder="Standard textarea field" />
        </Form.Label>
        <Form.Section>
            <Form.Submit onClick={(e) => { e.preventDefault(); alert(`Hey pa', I was submitted; don't forget to collect form values!`)}} name='form_submit_example_3_default' text='Form Submit' />
            <Form.Reset name='form_reset_example_3_default' text='Form Reset' />
        </Form.Section>
    </Form.Fieldset>
</Form>

Applying border style throughout

Using the style prop, you can change the way the fieldset's corresponding legend and children UI components are presented with regard to a border look-n-feel.

Example round style

When style='round' is defined in the Fieldset component, all relevant UI components will be rendered with a round-ish border. Similar deal with the square style value. When no style prop is defined, the default look-n-feel is used.

Fieldset with a round, purple, block and stacked look-n-feel
<Form id="round" name="duff">
    <Form.Fieldset style='round' scheme='purple' stacked block caption='Fieldset with a round, purple, block and stacked look-n-feel'>
        <Form.CheckboxGroup htmlFor='form_example_4_cb_4' label="Form checkbox">
            <Checkbox id="form_example_4_cb_1" name="form_example_4_cb_1" value="bar" />
            <Checkbox id="form_example_4_cb_2" name="form_example_4_cb_1" value="buzz" disabled />
            <Checkbox id="form_example_4_cb_4" name="form_example_4_cb_1" value="robin" checked />
        </Form.CheckboxGroup>
        <Form.RadioGroup htmlFor='form_example_4_radiogroup_1' label='Form radio group'>
            <Radio id="form_example_4_radiogroup_1" name="form_example_4_radiogroup_1" value="foo" checked />
            <Radio id="form_example_4_radiogroup_2" name="form_example_4_radiogroup_1" value="bar" />
            <Radio id="form_example_4_radiogroup_4" name="form_example_4_radiogroup_1" value="fizz" />
            <Radio id="form_example_4_radiogroup_4" name="form_example_4_radiogroup_1" value="buzz" />
        </Form.RadioGroup>
        <Form.Label text="Form select">
            <Select id="form_example_4_select_1" name="form_example_4_select_1" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
        </Form.Label>
        <Form.Label text="Form input field">
            <Form.Input id="form_example_4_input_1" name="form_example_4_input_1" value="buzz" placeholder="Standard input field" />
        </Form.Label>
        <Form.Section>
            <Form.Switch name='switch_example_4_default' label='Form default switch' />
            <Form.Switch name='switch_example_4_toggled' label='Form switch toggled on' toggled />
        </Form.Section>
        <Form.Label stacked block text="Form textarea with stacked label">
            <Form.Textarea id="form_example_4_textarea_1" name="form_example_4_textarea_1" placeholder="Standard textarea field" />
        </Form.Label>
        <Form.Section>
            <Form.Submit onClick={(e) => { e.preventDefault(); alert(`Hey pa', I was submitted; don't forget to collect form values!`)}} name='form_submit_example_4_default' text='Form Submit' />
            <Form.Reset name='form_reset_example_4_default' text='Form Reset' />
        </Form.Section>
    </Form.Fieldset>
</Form>

System props

Fieldset components get BACKGROUND BORDER, COMMON, LAYOUT and TYPOGRAPHY system props. Related, children components get similar props, but can (and will likely) have their own, distinct system props defined. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
blockBooleanRenders child UI components full-width, left-to-right (or RTL), where child element and corresponding label text, if defined, takes up an entire horizontal space-line. Works in tandem with the Form.Label component's block prop.
captionStringRenders a corresponding <legend> element
schemeStringApplies a color palette to the <legend> element, if caption is defined, and any nested form component that accepts a scheme prop. Choose from:
stackedBooleanLays out a form's UI elements top-to-bottom, stacked
styleStringApplies a border-radius to the corresponding <legend> and children UI elements. Choose from round, roundSmall, roundMedium, square and none.