Formik example:

```jsx
const { Formik, Form } = require('formik');
const { object, string } = require('yup');

const schema = object({
	name: string()
		.required()
		.label('Name'),
	options: string().nullable(),
	radio: string().required(),
	select: string().nullable()
});

const onSubmit = (values, actions) => {
	setTimeout(() => {
		actions.setSubmitting(false);
		alert('Submitted');
	}, 2000);
};

const options = [
	{
		id: '5c4af01ff04abe204e4c3484',
		label: 'Ellison Stanley'
	},
	{
		id: '5c4af01f81d3a073d8513841',
		label: 'Chapman Cruz'
	},
	{
		id: '5c4af01ffd465705e959f6f1',
		label: 'Mcdowell Wilcox'
	}
];

<Formik
	initialValues={{
		name: '',
		checkbox: false,
		radio: 'item-1',
		select: '',
		options: 'Yes',
		startDate: undefined,
		startDateRange: undefined
	}}
	validationSchema={schema}
	onSubmit={onSubmit}
>
	{({ values, setFieldValue }) => (
		<Form>
			<FormikInput name="name" />
			<div>
				<label htmlFor="test-checkbox">
					Checkbox
					<FormikCheckbox name="checkbox" id="test-checkbox" />
				</label>
			</div>

			<FormikRadioGroup name="radio">
				<FormikRadio
					id="formik-1"
					value="item-1"
					name="radio"
					label="Item 1"
				/>
				<FormikRadio
					id="formik-2"
					value="item-2"
					name="radio"
					label="Item 2"
				/>
			</FormikRadioGroup>

			<FormikOptions
				name="options"
				selectedValue={values.options}
				onChange={e => setFieldValue('options', e)}
				options={[
					{ label: 'Yes', value: 'Yes', e2e: 'Yes-Option' },
					{ label: 'No', value: 'No', e2e: 'No-Option' },
					{ label: 'Maybe', value: 'Maybe', e2e: 'Maybe' }
				]}
			/>

			<FormikSelect name="select">
				<option value="select 1">Select 1</option>
				<option value="select 2">Select 2</option>
				<option value="select 3">Select 3</option>
				<option value="select 4">Select 4</option>
			</FormikSelect>

			<div>
				<FormikTypeahead name="typeahead-one" options={options} />{' '}
				Single
			</div>

			<div>
				<FormikTypeahead
					name="typeahead-multi"
					isMultiSelect
					options={options}
				/>{' '}
				Multi
			</div>

			<div>
				<FormikTypeahead
					name="typeahead-onadd"
					onAdd={label => {
						const newItem = {
							id: Date.now(),
							label
						};

						options.push(newItem);

						return newItem;
					}}
					options={options}
				/>{' '}
				onAdd
			</div>

			<FormikDayPicker name="startDate" />
			<FormikDayPicker range name="startDateRange" />

			<FormikTextarea name="notes" />

			<ButtonGroup>
				<FormikSubmitButton />
				<FormikResetButton />
			</ButtonGroup>

			<div>
				<br />
				{JSON.stringify(values)}
			</div>
		</Form>
	)}
</Formik>;
```