이름	타입	설명
label / desc	string	control 위에 표시되며 desc는 help text로 렌더링됩니다.
nullable	boolean	label을 optional로 표시하고 여러 field variant에서 validation을 완화합니다.
Field.Text / Number / Date	subcomponents	자주 쓰이는 scalar field control입니다.
Field.Parent / Children	subcomponents	generated model template에서 사용하는 relation-oriented control입니다.

`libs/shared/ui/Field`는 rich text, map, postcode 같은 project-specific control을 위해 `akanjs/ui` Field를 감싸고 확장합니다.

사용 예시

Input

controlled primitive input namespace입니다. custom search box나 lightweight inline form처럼 `Field`보다 낮은 수준의 input 제어가 필요할 때 사용합니다.

Props / API

이름	타입	설명
value	string	controlled input value입니다.
onChange	(value, event?) => void	다음 string value를 받습니다.
validate	(value) => boolean \| string	valid input이면 true를, 아니면 error message를 반환합니다.
cacheKey	string	text를 sessionStorage에 저장합니다.
Input.TextArea / Password / Email	subcomponents	특화된 input variant입니다.

사용 예시

Select

primitive array, label/value option, Akan enum instance를 받을 수 있는 controlled selector입니다. single, multiple, searchable selection mode를 지원합니다.

Props / API

이름	타입	설명
value	T \| T[]	선택된 value입니다. multiple이 true이면 selected values입니다.
options	T[] \| { label, value }[] \| enum	option source입니다.
multiple	boolean	여러 값을 선택할 수 있게 합니다.
searchable	boolean	search input을 표시하고 필요하면 onSearch를 호출합니다.
renderOption / renderSelected	(value) => ReactNode	custom display renderer입니다.

사용 예시

Button

loading, success, error state가 내장된 async-aware button입니다. promise를 반환하고 처리 중 중복 클릭을 막아야 하는 action에 유용합니다.

Props / API

이름	타입	설명
onClick	(event, { onError }) => Promise<Result> \| Result	async-aware click handler입니다.
onSuccess	(result) => void	success state가 짧게 표시된 뒤 호출됩니다.
disabled	boolean	native button에서 상속된 prop입니다. loading/success 중에도 disabled됩니다.

사용 예시

Forms UI

Form component는 module template에서 쓰는 high-level `Field.*` control부터 low-level `Input`, `Select`, async `Button` primitive까지 포함합니다.

Field

high-level form field namespace입니다. label, description, optional marker, validation-friendly input, module template에서 쓰는 여러 typed control을 조합합니다.

Props / API

이름	타입	설명
label / desc	string	control 위에 표시되며 desc는 help text로 렌더링됩니다.
nullable	boolean	label을 optional로 표시하고 여러 field variant에서 validation을 완화합니다.
Field.Text / Number / Date	subcomponents	자주 쓰이는 scalar field control입니다.
Field.Parent / Children	subcomponents	generated model template에서 사용하는 relation-oriented control입니다.

`libs/shared/ui/Field`는 rich text, map, postcode 같은 project-specific control을 위해 `akanjs/ui` Field를 감싸고 확장합니다.

사용 예시

Input

controlled primitive input namespace입니다. custom search box나 lightweight inline form처럼 `Field`보다 낮은 수준의 input 제어가 필요할 때 사용합니다.

Props / API

이름	타입	설명
value	string	controlled input value입니다.
onChange	(value, event?) => void	다음 string value를 받습니다.
validate	(value) => boolean \| string	valid input이면 true를, 아니면 error message를 반환합니다.
cacheKey	string	text를 sessionStorage에 저장합니다.
Input.TextArea / Password / Email	subcomponents	특화된 input variant입니다.

사용 예시

Select

primitive array, label/value option, Akan enum instance를 받을 수 있는 controlled selector입니다. single, multiple, searchable selection mode를 지원합니다.

Props / API

이름	타입	설명
value	T \| T[]	선택된 value입니다. multiple이 true이면 selected values입니다.
options	T[] \| { label, value }[] \| enum	option source입니다.
multiple	boolean	여러 값을 선택할 수 있게 합니다.
searchable	boolean	search input을 표시하고 필요하면 onSearch를 호출합니다.
renderOption / renderSelected	(value) => ReactNode	custom display renderer입니다.

사용 예시

Button

loading, success, error state가 내장된 async-aware button입니다. promise를 반환하고 처리 중 중복 클릭을 막아야 하는 action에 유용합니다.

Props / API

이름	타입	설명
onClick	(event, { onError }) => Promise<Result> \| Result	async-aware click handler입니다.
onSuccess	(result) => void	success state가 짧게 표시된 뒤 호출됩니다.
disabled	boolean	native button에서 상속된 prop입니다. loading/success 중에도 disabled됩니다.

사용 예시