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})}
/>

API Reference

/api-docs/docs.md