Forms UI

Form components range from high-level `Field.*` controls used in module templates to lower-level `Input`, `Select`, and async `Button` primitives.

Field

High-level form field namespace. It combines labels, descriptions, optional markers, validation-friendly inputs, and many typed controls used inside module templates.

Props / API

Name	Type	Description
label / desc	string	Shown above the control, with desc rendered as help text.
nullable	boolean	Marks the label as optional and relaxes validation in many field variants.
Field.Text / Number / Date	subcomponents	Common scalar field controls.
Field.Parent / Children	subcomponents	Relation-oriented controls used by generated model templates.

`libs/shared/ui/Field` wraps and extends `akanjs/ui` Field for project-specific controls such as rich text, maps, and postcode.

Usage

Input

Controlled primitive input namespace. Use it when you need lower-level input control than `Field`, such as custom search boxes or lightweight inline forms.

Props / API

Name	Type	Description
value	string	Controlled input value.
onChange	(value, event?) => void	Receives the next string value.
validate	(value) => boolean \| string	Returns true for valid input or an error message.
cacheKey	string	Persists text to sessionStorage.
Input.TextArea / Password / Email	subcomponents	Specialized input variants.

Usage

Select

Controlled selector that accepts primitive arrays, label/value options, or Akan enum instances. It supports single, multiple, and searchable selection modes.

Props / API

Name	Type	Description
value	T \| T[]	Selected value, or selected values when multiple is true.
options	T[] \| { label, value }[] \| enum	Option source.
multiple	boolean	Enable multiple selected values.
searchable	boolean	Show search input and optionally call onSearch.
renderOption / renderSelected	(value) => ReactNode	Custom display renderers.

Usage

Button

Async-aware button with built-in loading, success, and error state. It is useful for actions that return promises and should prevent duplicate clicks while processing.

Props / API

Name	Type	Description
onClick	(event, { onError }) => Promise<Result> \| Result	Async-aware click handler.
onSuccess	(result) => void	Called after the success state is shown briefly.
disabled	boolean	Inherited native button prop; also disabled while loading/success.

Usage

Forms UI

Form components range from high-level `Field.*` controls used in module templates to lower-level `Input`, `Select`, and async `Button` primitives.

Field

High-level form field namespace. It combines labels, descriptions, optional markers, validation-friendly inputs, and many typed controls used inside module templates.

Props / API

Name	Type	Description
label / desc	string	Shown above the control, with desc rendered as help text.
nullable	boolean	Marks the label as optional and relaxes validation in many field variants.
Field.Text / Number / Date	subcomponents	Common scalar field controls.
Field.Parent / Children	subcomponents	Relation-oriented controls used by generated model templates.

`libs/shared/ui/Field` wraps and extends `akanjs/ui` Field for project-specific controls such as rich text, maps, and postcode.

Usage

Input

Controlled primitive input namespace. Use it when you need lower-level input control than `Field`, such as custom search boxes or lightweight inline forms.

Props / API

Name	Type	Description
value	string	Controlled input value.
onChange	(value, event?) => void	Receives the next string value.
validate	(value) => boolean \| string	Returns true for valid input or an error message.
cacheKey	string	Persists text to sessionStorage.
Input.TextArea / Password / Email	subcomponents	Specialized input variants.

Usage

Select

Controlled selector that accepts primitive arrays, label/value options, or Akan enum instances. It supports single, multiple, and searchable selection modes.

Props / API

Name	Type	Description
value	T \| T[]	Selected value, or selected values when multiple is true.
options	T[] \| { label, value }[] \| enum	Option source.
multiple	boolean	Enable multiple selected values.
searchable	boolean	Show search input and optionally call onSearch.
renderOption / renderSelected	(value) => ReactNode	Custom display renderers.

Usage

Button

Async-aware button with built-in loading, success, and error state. It is useful for actions that return promises and should prevent duplicate clicks while processing.

Props / API

Name	Type	Description
onClick	(event, { onError }) => Promise<Result> \| Result	Async-aware click handler.
onSuccess	(result) => void	Called after the success state is shown briefly.
disabled	boolean	Inherited native button prop; also disabled while loading/success.

Usage