Select
Basics
This is just a simple HTML select element which works within the Kingpin
<Form />
component out of the box.
Props
Name | Mandatory | Purpose |
---|---|---|
name | true | A string which describe the element. Will be the element key in the submit payload |
initialValue | false | The select initial value |
validation | false | A single (or an array/object of) function(s) to validate the element. Check the doc |
errorClassName | false | A className that is attached to the className on error. Check here for more. |
Select attributes | false | All 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>
)
}