AiForm
Minimal Form & Input React Components.
Provides Form, Input, Radio, Checkbox and Select component
Install
npm i @aiui/ai-form
Import
import AiForm, { AiInput, AiSelect, AiCheckbox, AiRadio } from '@aiui/ai-form';
AiForm Props
Name |
Type |
Default |
Description |
onDone |
func |
( ) => { } |
Callback fired when Form gets validated and submitted (returns form current Ref) |
children |
node |
|
Form children (input,radio,select,checkbox) |
AiInput Props
Name |
Type |
Default |
Description |
name |
string |
|
Input field name |
type |
string |
text |
Input field type |
label |
string |
|
Input field label |
showLabel |
bool |
true |
If false, field label is hidden |
withGroup |
bool |
true |
If false, field margin is removed |
AiSelect Props
Name |
Type |
Default |
Description |
name |
string |
|
Select field name |
options |
array |
[ ] |
Select field options ( [{ label, value }, { label, value }] ) |
label |
string |
|
Select field label |
showLabel |
bool |
true |
If false, field label is hidden |
withGroup |
bool |
true |
If false, field margin is removed |
AiCheckbox Props
Name |
Type |
Default |
Description |
name |
string |
|
Checkbox field name |
options |
array |
[ ] |
Checkbox field options ( [{ label, value }, { label, value }] ) |
label |
string |
|
Checkbox field label |
showLabel |
bool |
true |
If false, field label is hidden |
withGroup |
bool |
true |
If false, field margin is removed |
selectedValues |
array |
[ ] |
Default Checked Options |
inline |
bool |
true |
If true, Checkbox options shown inline |
AiRadio Props
Name |
Type |
Default |
Description |
name |
string |
|
Radio field name |
options |
array |
[ ] |
Radio field options ( [{ label, value }, { label, value }] ) |
label |
string |
|
Radio field label |
showLabel |
bool |
true |
If false, field label is hidden |
withGroup |
bool |
true |
If false, field margin is removed |
selectedValue |
any |
|
Default Checked Option |
inline |
bool |
true |
If true, Radio options shown inline |