Skip to main content

Select

Basics

This is just a simple HTML select element which works within the Kingpin <Form /> component out of the box.

Props

NameMandatoryPurpose
nametrueA string which describe the element. Will be the element key in the submit payload
initialValuefalseThe select initial value
validationfalseA single (or an array/object of) function(s) to validate the element. Check the doc
errorClassNamefalseA className that is attached to the className on error. Check here for more.
Select attributesfalseAll the React select attributes
import { Form, FormResult, Select } from 'kingpin-react-form'

function App(): JSX.Element {
const submit = (e: FormEvent<HTMLFormElement>, data: FormResult) => {
e.preventDefault()
console.log(data)
}

return (
<Form onSubmit={submit}>
<h3>Favourite pasta</h3>
<Select name="pasta">
<option value="0">Open this select menu</option>
<option value="1">Pesto</option>
<option value="2">Ragù</option>
<option value="3">Carbonara</option>
</Select>
<button type="submit">Submit</button>
</Form>
)
}