Form and related UI components

A system form renders the basic HTML counterpart element, form, with the option of declaratively rendering related UI elements, such as fieldset inputs, selects, etc.

Default example

I'm a form. Not much here though, check me out with some relevant form elements (below)
<Form id="fizz" name="buzz">
I'm a form. Not much here though, check me out with some relevant form elements (below)
</Form>

Kitchensink

Form with common, related UI system components with corresponding, implicit labels in the default layout (left-to-right)

Left-to-Right

Default Kitchensink
<Form id="foo" name="bar">
    <Form.Fieldset caption='Default Kitchensink'>
        <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 (text)">
            <Form.Input id="form_example_input_1" name="form_example_input_text_1" value="buzz" placeholder="Standard input field" />
        </Form.Label>
        <Form.Label text="Form input field (password)">
            <Form.Input type='password' id="form_example_input_password_1" name="form_example_input_password_1" value="" placeholder="Password input field" />
        </Form.Label>
        <Form.Label text="Form input field (email)">
            <Form.Input type='email' id="form_example_input_email_1" name="form_example_input_email_1" value="" placeholder="Email address input field" />
        </Form.Label>
        <Form.Label text="Form input field (telephone)">
            <Form.Input type='tel' id="form_example_input_tel_1" name="form_example_input_tel_1" value="" placeholder="Telephone input field" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
        </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>

Vertical-stack and full-width

Easily adjust a Form's UI elements to stack vertically one-after-the-other and in full-width mode via the stacked and block props defined in a parent component's prop scope; in the below example, stacked and block are set on the Form.Fieldset component since it is the immediate parent component.

Note: If you don't want all components to be stacked and or block, set these props as you fancy on individual child components.

Stacked and full-width Kitchensink
<Form id="bar" name="foo">
    <Form.Fieldset stacked block caption='Stacked and full-width Kitchensink'>
        <Form.CheckboxGroup htmlFor='form_example_cb_6' label="Form checkbox">
            <Checkbox id="form_example_cb_4" name="form_example_cb_2" value="bar" />
            <Checkbox id="form_example_cb_5" name="form_example_cb_2" value="buzz" disabled />
            <Checkbox id="form_example_cb_6" name="form_example_cb_2" value="robin" checked />
        </Form.CheckboxGroup>
        <Form.RadioGroup htmlFor='form_example_radiogroup_8' label='Form radio group'>
            <Radio id="form_example_radiogroup_5" name="form_example_radiogroup_2" value="foo" checked />
            <Radio id="form_example_radiogroup_6" name="form_example_radiogroup_2" value="bar" />
            <Radio id="form_example_radiogroup_7" name="form_example_radiogroup_2" value="fizz" />
            <Radio id="form_example_radiogroup_8" name="form_example_radiogroup_2" value="buzz" />
        </Form.RadioGroup>
        <Form.Label text="Form select">
            <Select id="form_example_select_2" name="age2" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
        </Form.Label>
        <Form.Label text="Form input field (text)">
            <Form.Input id="form_example_input_2" name="form_example_input_text_2" value="buzz" placeholder="Standard input field" />
        </Form.Label>
        <Form.Label text="Form input field (password)">
            <Form.Input type='password' id="form_example_input_password_2" name="form_example_input_password_2" value="" placeholder="Password input field" />
        </Form.Label>
        <Form.Label text="Form input field (email)">
            <Form.Input type='email' id="form_example_input_email_2" name="form_example_input_email_2" value="" placeholder="Email address input field" />
        </Form.Label>
        <Form.Label text="Form input field (telephone)">
            <Form.Input type='tel' id="form_example_input_tel_2" name="form_example_input_tel_2" value="" placeholder="Telephone input field" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
        </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_textarea_2" name="form_example_textarea_2" 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>

System props

Form components get BACKGROUND BORDER, COMMON, LAYOUT and TYPOGRAPHY system props. Related, children components get similar props, but can have their own, distinct system props. A form component can also receive all relevant native props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
actionStringThe URI of a program that processes the form information. This value can be overridden by a formaction attribute on a <button> or <input> element.
autocompleteStringIndicates whether input elements can by default have their values automatically completed by the browser. Possible values are off and on
enctypeStringWhen the value of the method attribute is post, enctype is the MIME type of content that is used to submit the form to the server. Possible values are: application/x-www-form-urlencoded, multipart/form-data, text/plain (HTML5)
methodStringThe HTTP method that the browser uses to submit the form. Possible values are: post, get, dialog
nameStringSets the name attribute on the element
stackedBooleanLays out a form's UI elements top-to-bottom, stacked
targetStringA name or keyword indicating where to display the response that is received after submitting the form, e.g. _self, _blank, _parent, _top, or an iframename