Collection of React components to build forms using @use-ui/hooks.
Consist of form inputs and several additional components.
Form inputs
- CheckBox - Check box
- Input - Text input
- Select - Select with autocomplete, fetch options from server, multiple selected options
- Static - Disabled text input
- TextArea - Text multi line input
Each of the form input components uses FormGroup for its rendering, and
accepts FormGroup props.
Input components accept validation constraint as propertes:
<Input
field={fields.name}
required
minLength={10}
/>
Additional components
- InlineEdit - Supports inline-editing of values. Can use one of the form inputs for entry.
- ActionResult - Render error or success message.
Typical cases
Default value for Select when loading data from server
FAQ
Why there's on onChange handlers on field elements.
OnChange origins in imperative world with inputs and event listeners. Instead of using onChange on field elements, use useEffect on form data or values.
Default value of <Select> isn't set
Make sure values of your options have string type. Number and other types won't work:
<Select
value={currentGroupId}
topic={services.groups}
map={group => ({value: "" + group.id, label: group.name})}
/>