FormField

This component is statefully managed by its parent Form component with Formik. Custom event handlers may be provided for fine tuned control.

Result

Loading...

Live Editor

<Form onSubmit={(values, actions) => { console.log(values); setTimeout(() => { actions.setSubmitting(false); }, 1500); }} > <div style={{ display: 'grid', gridGap: '1rem' }}> <FormField> <TextField name="textfield" label="TextField" /> </FormField> <FormField> <NumberField name="numberField" label="NumberField" /> </FormField> <FormField> <DatePicker name="date" label="Date" /> </FormField> <FormField> <DatePicker name="datetime" label="Date & time" type="datetime-local" /> </FormField> <FormField> <DatePicker name="time" label="Time" type="time" /> </FormField> <FormField> <Select name="select" label="Select"> <Item key="one">One</Item> <Item key="two">Two</Item> </Select> </FormField> <FormField> <StartStop name="start-stop" startOptions={[ { id: 'Start', defaultValue: '01/01/2000', label: 'Start (01/01/2000)', }, ]} stopOptions={[ { id: 'Stop', defaultValue: '12/31/2022', label: 'Stop (12/31/2022)', }, { id: 'Duration', label: 'Duration', defaultValue: 4, }, ]} /> </FormField> <FormField> <MultiSelect name="multiSelect" label="MultiSelect"> <Item key="one">One</Item> <Item key="two">Two</Item> </MultiSelect> </FormField> <FormField> <Range name="range" label="Range" minValue={0} maxValue={100} /> </FormField> <FormField> <Slider name="slider" label="Slider" value={2020} min={2015} max={2025} tickLabelFrequency={1} /> </FormField> <FormField> <CheckboxGroup label="Favorite fruits" name="favoriteFruits"> <CheckboxGroup.Item value="apples" label="Apples" /> <CheckboxGroup.Item value="pears" label="Pears" /> <CheckboxGroup.Item value="bananas" label="Bananas" /> <CheckboxGroup.Item value="melons" label="Melons" /> <CheckboxGroup.Item value="strawberries" label="Strawberries" /> </CheckboxGroup> </FormField> <FormField> <RadioGroup label="Favorite animal" name="favoriteAnimal"> <RadioGroup.Item value="lion" label="Lion" /> <RadioGroup.Item value="tiger" label="Tiger" /> <RadioGroup.Item value="bear" label="Bear" /> <RadioGroup.Item value="moose" label="Moose" /> <RadioGroup.Item value="goose" label="Goose" /> </RadioGroup> </FormField> <FormField> <Checkbox name="lights" label="Lights" /> </FormField> <FormField> <Checkbox name="camera" label="Camera" /> </FormField> <FormField> <Switch name="action" label="Action" /> </FormField> </div> </Form>

<Form
    onSubmit={(values, actions) => {
        console.log(values);

        setTimeout(() => {
            actions.setSubmitting(false);
        }, 1500);
    }}
>
    <div style={{ display: 'grid', gridGap: '1rem' }}>
        <FormField>
            <TextField name="textfield" label="TextField" />
        </FormField>

        <FormField>
            <NumberField name="numberField" label="NumberField" />
        </FormField>

        <FormField>
            <DatePicker name="date" label="Date" />
        </FormField>

        <FormField>
            <DatePicker name="datetime" label="Date & time" type="datetime-local" />
        </FormField>

        <FormField>
            <DatePicker name="time" label="Time" type="time" />
        </FormField>

        <FormField>
            <Select name="select" label="Select">
                <Item key="one">One</Item>
                <Item key="two">Two</Item>
            </Select>
        </FormField>

        <FormField>
            <StartStop
                name="start-stop"
                startOptions={[
                    {
                        id: 'Start',
                        defaultValue: '01/01/2000',
                        label: 'Start (01/01/2000)',
                    },
                ]}
                stopOptions={[
                    {
                        id: 'Stop',
                        defaultValue: '12/31/2022',
                        label: 'Stop (12/31/2022)',
                    },
                    {
                        id: 'Duration',
                        label: 'Duration',
                        defaultValue: 4,
                    },
                ]}
            />
        </FormField>

        <FormField>
            <MultiSelect name="multiSelect" label="MultiSelect">
                <Item key="one">One</Item>
                <Item key="two">Two</Item>
            </MultiSelect>
        </FormField>

        <FormField>
            <Range name="range" label="Range" minValue={0} maxValue={100} />
        </FormField>

        <FormField>
            <Slider
                name="slider"
                label="Slider"
                value={2020}
                min={2015}
                max={2025}
                tickLabelFrequency={1}
            />
        </FormField>

        <FormField>
            <CheckboxGroup label="Favorite fruits" name="favoriteFruits">
                <CheckboxGroup.Item value="apples" label="Apples" />
                <CheckboxGroup.Item value="pears" label="Pears" />
                <CheckboxGroup.Item value="bananas" label="Bananas" />
                <CheckboxGroup.Item value="melons" label="Melons" />
                <CheckboxGroup.Item value="strawberries" label="Strawberries" />
            </CheckboxGroup>
        </FormField>

        <FormField>
            <RadioGroup label="Favorite animal" name="favoriteAnimal">
                <RadioGroup.Item value="lion" label="Lion" />
                <RadioGroup.Item value="tiger" label="Tiger" />
                <RadioGroup.Item value="bear" label="Bear" />
                <RadioGroup.Item value="moose" label="Moose" />
                <RadioGroup.Item value="goose" label="Goose" />
            </RadioGroup>
        </FormField>

        <FormField>
            <Checkbox name="lights" label="Lights" />
        </FormField>

        <FormField>
            <Checkbox name="camera" label="Camera" />
        </FormField>

        <FormField>
            <Switch name="action" label="Action" />
        </FormField>
    </div>
</Form>

Validation

Sync Field Level Validation

Result

Loading...

Live Editor

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); function Example() { const handleSubmit = (values, actions) => { console.log({ values, actions }); setTimeout(() => { actions.setSubmitting(false); }, 1500); }; return ( <Form onSubmit={handleSubmit} initialValues={{ select: 'one', multiSelect: ['two'], camera: true, action: true, favoriteFruits: ['bananas', 'apples'], favoriteAnimal: 'moose', }} > <div style={{ display: 'grid', gridGap: '1rem' }}> <FormField validate={(value) => sleep(1000).then(() => { if (value === 'a') { return 'This is no good.'; } }) } > <TextField name="textfield" label="TextField" /> </FormField> <FormField> <NumberField name="numberField" label="NumberField" /> </FormField> <FormField> <Select name="select" label="Select"> <Item key="one">One</Item> <Item key="two">Two</Item> </Select> </FormField> <FormField> <MultiSelect name="multiSelect" label="MultiSelect"> <Item key="one">One</Item> <Item key="two">Two</Item> </MultiSelect> </FormField> <FormField> <MultiSelect name="multiSelect" label="MultiSelect"> <Item key="one">One</Item> <Item key="two">Two</Item> </MultiSelect> </FormField> <FormField> <Range name="range" label="Range" minValue={0} maxValue={100} /> </FormField> <FormField> <Slider name="slider" label="Slider" value={2020} min={2010} max={2030} tickLabelFrequency={1} /> </FormField> <FormField> <CheckboxGroup label="Favorite fruits" name="favoriteFruits"> <CheckboxGroup.Item value="apples" label="Apples" /> <CheckboxGroup.Item value="pears" label="Pears" /> <CheckboxGroup.Item value="bananas" label="Bananas" /> <CheckboxGroup.Item value="melons" label="Melons" /> <CheckboxGroup.Item value="strawberries" label="Strawberries" /> </CheckboxGroup> </FormField> <FormField> <RadioGroup label="Favorite animal" name="favoriteAnimal"> <RadioGroup.Item value="lion" label="Lion" /> <RadioGroup.Item value="tiger" label="Tiger" /> <RadioGroup.Item value="bear" label="Bear" /> <RadioGroup.Item value="moose" label="Moose" /> <RadioGroup.Item value="goose" label="Goose" /> </RadioGroup> </FormField> <FormField> <Checkbox name="lights" label="Lights" /> </FormField> <FormField> <Checkbox name="camera" label="Camera" /> </FormField> <FormField> <Switch name="action" label="Action" /> </FormField> </div> </Form> ); } render(<Example />);

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function Example() {
    const handleSubmit = (values, actions) => {
        console.log({ values, actions });

        setTimeout(() => {
            actions.setSubmitting(false);
        }, 1500);
    };

    return (
        <Form
            onSubmit={handleSubmit}
            initialValues={{
                select: 'one',
                multiSelect: ['two'],
                camera: true,
                action: true,
                favoriteFruits: ['bananas', 'apples'],
                favoriteAnimal: 'moose',
            }}
        >
            <div style={{ display: 'grid', gridGap: '1rem' }}>
                <FormField
                    validate={(value) =>
                        sleep(1000).then(() => {
                            if (value === 'a') {
                                return 'This is no good.';
                            }
                        })
                    }
                >
                    <TextField name="textfield" label="TextField" />
                </FormField>

                <FormField>
                    <NumberField name="numberField" label="NumberField" />
                </FormField>

                <FormField>
                    <Select name="select" label="Select">
                        <Item key="one">One</Item>
                        <Item key="two">Two</Item>
                    </Select>
                </FormField>

                <FormField>
                    <MultiSelect name="multiSelect" label="MultiSelect">
                        <Item key="one">One</Item>
                        <Item key="two">Two</Item>
                    </MultiSelect>
                </FormField>

                <FormField>
                    <MultiSelect name="multiSelect" label="MultiSelect">
                        <Item key="one">One</Item>
                        <Item key="two">Two</Item>
                    </MultiSelect>
                </FormField>

                <FormField>
                    <Range name="range" label="Range" minValue={0} maxValue={100} />
                </FormField>

                <FormField>
                    <Slider
                        name="slider"
                        label="Slider"
                        value={2020}
                        min={2010}
                        max={2030}
                        tickLabelFrequency={1}
                    />
                </FormField>

                <FormField>
                    <CheckboxGroup label="Favorite fruits" name="favoriteFruits">
                        <CheckboxGroup.Item value="apples" label="Apples" />
                        <CheckboxGroup.Item value="pears" label="Pears" />
                        <CheckboxGroup.Item value="bananas" label="Bananas" />
                        <CheckboxGroup.Item value="melons" label="Melons" />
                        <CheckboxGroup.Item value="strawberries" label="Strawberries" />
                    </CheckboxGroup>
                </FormField>

                <FormField>
                    <RadioGroup label="Favorite animal" name="favoriteAnimal">
                        <RadioGroup.Item value="lion" label="Lion" />
                        <RadioGroup.Item value="tiger" label="Tiger" />
                        <RadioGroup.Item value="bear" label="Bear" />
                        <RadioGroup.Item value="moose" label="Moose" />
                        <RadioGroup.Item value="goose" label="Goose" />
                    </RadioGroup>
                </FormField>

                <FormField>
                    <Checkbox name="lights" label="Lights" />
                </FormField>

                <FormField>
                    <Checkbox name="camera" label="Camera" />
                </FormField>

                <FormField>
                    <Switch name="action" label="Action" />
                </FormField>
            </div>
        </Form>
    );
}

render(<Example />);

Async Field Level Validation

Result

Loading...

Live Editor

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); function Example() { const handleSubmit = (values, actions) => { console.log({ values, actions }); }; return ( <Form id="single-field-async" onSubmit={handleSubmit} initialValues={{ 'the-switch': 'on' }} > <FormField validate={(value) => sleep(1000).then(() => { if (value === 'a') { return 'This is no good.'; } }) } > <TextField name="textfield" label="TextField" description="Try setting to 'a' and waiting" /> </FormField> </Form> ); } render(<Example />);

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function Example() {
    const handleSubmit = (values, actions) => {
        console.log({ values, actions });
    };

    return (
        <Form
            id="single-field-async"
            onSubmit={handleSubmit}
            initialValues={{ 'the-switch': 'on' }}
        >
            <FormField
                validate={(value) =>
                    sleep(1000).then(() => {
                        if (value === 'a') {
                            return 'This is no good.';
                        }
                    })
                }
            >
                <TextField
                    name="textfield"
                    label="TextField"
                    description="Try setting to 'a' and waiting"
                />
            </FormField>
        </Form>
    );
}

render(<Example />);

Props