Special inputs
As listed in our features, the library supports all native HTML form fields. This includes the HTML <select /> element as well as special cases of the <input /> element.
In our playground you can take a look at such fields and test them out.
Checkbox
A simple checkbox represents a boolean and is true when checked or false otherwise.
<Field name="cookies" type="boolean"> {(field, props) => ( <label> <input {...props} type="checkbox" checked={field.value} /> Yes, I want cookies </label> )} </Field> However, you can also use multiple checkboxes to represent an array of strings. For this you simply have to add the value attribute to the HTML <input /> element.
{ [ { label: 'Bananas', value: 'bananas' }, { label: 'Apples', value: 'apples' }, { label: 'Grapes', value: 'grapes' }, ].map(({ label, value }) => ( <Field key={value} name="fruits" type="string[]"> {(field, props) => ( <label> <input {...props} type="checkbox" value={value} checked={field.value?.includes(value)} /> {label} </label> )} </Field> )); } Select
An HTML <select /> element allows you to select a string from a predefined list of options.
<Field name="framework"> {(field, props) => ( <select {...props}> {[ { label: 'Preact', value: 'preact' }, { label: 'Solid', value: 'solid' }, { label: 'Qwik', value: 'qwik' }, ].map(({ label, value }) => ( <option key={value} value={value} selected={field.value === value}> {label} </option> ))} </select> )} </Field> However, if you set the multiple attribute, multiple options can be selected making the field represent an array of strings.
<Field name="framework" type="string[]"> {(field, props) => ( // Set "multiple" to "true" <select {...props} multiple> {[ { label: 'Preact', value: 'preact' }, { label: 'Solid', value: 'solid' }, { label: 'Qwik', value: 'qwik' }, ].map(({ label, value }) => ( <option key={value} value={value} selected={field.value?.includes(value)} > {label} </option> ))} </select> )} </Field> File
For the HTML <input type="file" /> element it works similar to the HTML <select /> element. Without the multiple attribute it represents a single file and with, a list of files.