Motivation

To be able to easily compose different kinds of (higher level) form fields with consistent interaction states using Base components/hooks,

Currently, only the Input component is supported (doc).

<FormControlUnstyled defaultValue="" required>
  <Label>Name</Label>
  <Input />
  <HelperText />
</FormControlUnstyled>

But that <Input /> could just as well be an Autocomplete or a Switch.

Requirements

1. Consistent interface for getting a value from any form component

• Currently FormControl accepts an onChange prop that gets an event as the sole argument
• This works for getting the value from a basic Input using event.target.value, but doesn't work for cases like multi-select or Autocomplete with multiple options
• It could updated to provide the latest value as a second argument like: onChange: (event: React.SyntheticEvent, newValue: any) => void

Some components already have this second argument:

• useAutocomplete: onChange?: (event: React.SyntheticEvent, value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<T>) => void
• useSlider: onChange?: (event: Event, value: number | number[], activeThumb: number) => void
• useSelect: onChange?: ( event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue<OptionValue, Multiple>, ) => void
• useNumberInput

2. Additional metadata

Some components call onChange with "metadata" arguments:

• Autocomplete: reason, details
• Slider: activeThumb

Perhaps a general metadata object can be used as the third argument, e.g. onChange: (event, newValue, metadata).

Components

• Input
• Select [select] Integrate with FormControlUnstyled #12
• Slider
• Switch [Switch] Integrate with FormControlUnstyled #13
• Autocomplete
• TextareaAutosize
• NumberInput