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>

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 />);

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 />);

Props