namespaced-fieldset Examples

Try it out

Person 1

First:

Last:

Kid 1Name:

Kid 2Name:

JSX you write

<Fieldset namespace="person[0]">
    <legend>Person 1</legend>
    First: <Input name="firstname"/>
    Last: <Input name="lastname"/>
    <Fieldset namespace="kids[0]">
        <legend>Kid 1</legend>
        Name: <Input name="name"/>
    </Fieldset>
    <Fieldset namespace="kids[1]">
        <legend>Kid 2</legend>
        Name: <Input name="name"/>
    </Fieldset>
</Fieldset>

Generated HTML

<fieldset>
    <legend>Person 1</legend>
    First: <input name="person[0].firstname"/>
    Last: <input name="person[0].lastname"/>
    <fieldset>
        <legend>Kid 1</legend>
        Name: <input name="person[0].kid[0].name"/>
    </fieldset>
    <fieldset>
        <legend>Kid 2</legend>
        Name: <input name="person[0].kid[0].name"/>
    </fieldset>
</fieldset>

Try it out

First:

Last:

Kid Name:

JSX you write

<Fieldset.Headless namespace="person[1]">
    First: <Input name="firstname"/>
    Last: <Input name="lastname"/>
    <Fieldset.Headless namespace="kids[0]">
        Kid Name: <Input name="name"/>
    </Fieldset.Headless>
</Fieldset.Headless>

Generated HTML

First: <input name="person[1].firstname"/>
Last: <input name="person[1].lastname"/>
Kid Name: <input name="person[1].kids[0].name"/>

namespaced-fieldset Examples

Basic example

Give namespace with Fieldset, then Inputs are namespaced

Try it out

JSX you write

Generated HTML

Use Fieldset.Headless, if you don't want to render fieldset

Try it out

JSX you write

Generated HTML

constructFromFormData() on client side

constructFromQueryString() on server side