getInputProps

form.getInputProps(path) returns the props a field needs, so you spread it instead of wiring each handler.

Fields that receive a value

Most fields take value and call onChange with the new value: Select, Slider, NumberInput, DatePicker, TagsInput, Rating, Radio.Group and others. Input and Textarea call onChange with the event, and getInputProps reads event.target.value for you.

General

Select, Radio.Group and Slider take the spread.

Checkboxes

A checkbox has no value, it has checked. Pass { type: 'checkbox' } and getInputProps returns checked and reads event.target.checked.

Checkbox

Use the checkbox type for boolean fields.

Showing the error

While a field has an error, getInputProps also returns error and errorMessage. Input, Textarea, NumberInput, TagsInput, Select, Checkbox, Radio, Radio.Group, Toggle and Slider show them. On other fields, such as SegmentedControl, pass only value and onChange, or the extra props reach the DOM as unknown attributes.

APIs

type getInputProps = (
  path: string,
  options?: { type?: 'input' | 'checkbox' }
) => {
  value?: any
  checked?: boolean
  onChange: (valueOrEvent: any) => void
  onBlur: () => void
  error?: boolean
  errorMessage?: string
}