Input


Input Line Style (theme="line"):   

Input 1:   
(Only label and name attributes)
Input 2:   

Input 3:   
  
  

Input 4:   

Input 5:   

Input 6:   

Input 7:   

Input 8:   

Input 9:   
unit

Input 10:   
em

Input 11:   
custom string

Input 12:   
  

Mixed some UI attributes (ui="fullwidth pill success"):   
All UI attributes (ui="fullwidth small medium large pill rounded success error"):   

Password Input


Password Input Line Style (theme="line"):   

Password Input 1:   
(Only label and name attributes)
Password Input 2:   

Password Input 3:   
  
  

Password Input 4:   

Password Input 5:   

Password Input 6:   

Password Input 7:   

Password Input 8:   

Password Input 9:   
unit

Password Input 10:   
em

Password Input 11:   
custom string

Password Input 12:   
  

Mixed some UI attributes (ui="fullwidth pill success"):   
All UI attributes (ui="fullwidth small medium large pill rounded success error"):   

Textarea


Textarea Line Style(theme="line"):   

Textarea 1:   

Textarea 2:   
  
  

Textarea 3:   

Textarea 4:   

Textarea 5:   

Textarea 6:   

Textarea 7:   

All UI attributes (ui="fullwidth pill rounded success error"):   

Select (normal)







Custom Select


Option 1

Option 1
Custom Select

Option 2
Custom Select (default option is `Option 2`)

Option 1
Custom Select

Option 1
Top Position

Custom Select Fullwidth

Multiple Select


Option 1Option 2Option 3

Option 1Option 2Option 3Option 4

Single Select


Option 1Option 2Option 3

Option 1Option 2Option 3Option 4

Option 1Option 2Option 3Option 4
content one...
content two...
content three...
content four...

Switch







content here...

Radio





Date










Checkbox





Number


+-

+-

+-

Dynamic Fields



  
  
  
  
  
Add new

File


File Field


Merge Input








Flex Layout


Left Title

Left Title

Right Title

Right Title

No Icon

No Icon

API


Input

import {Input} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
typestringtextThe type of input. Such as <input type="text" name="name"> gives a text box.
themestring | line-The display style of the control
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
status:
error, success
corners:
pill, rounded
size:
fullwidth, small, medium, large
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
unitsstring-Specify a unit identification string. Such as em, px, and so on.
namestring-Name is not deprecated when used with form fields.
maxLengthnumber-Defines the maximum number of characters
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.
iconLeftReactNode-Set the left icon of this control
iconRightReactNode-Set the right icon of this control

It accepts all props which this control support.

Password Input

import {PasswordInput} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
themestring | line-The display style of the control
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
status:
error, success
corners:
pill, rounded
size:
fullwidth, small, medium, large
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
unitsstring-Specify a unit identification string. Such as em, px, and so on.
namestring-Name is not deprecated when used with form fields.
maxLengthnumber-Defines the maximum number of characters
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.
iconLeftReactNode-Set the left icon of this control
iconRightReactNode-Set the right icon of this control

It accepts all props which this control support.

Merge Input

import {MergeInput} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
typestringtextThe type of input. Such as <input type="text" name="name"> gives a text box.
btnTypestringbuttonThe type attribute specifies the type of button. Such as submit, reset or button
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
status:
error, success
corners:
pill, rounded
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
maxLengthnumber-Defines the maximum number of characters
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.
iconReactNode-Set the icon of this control

It accepts all props which this control support.

Textarea

import {Textarea} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
themestring | line-The display style of the control
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
status:
error, success
corners:
pill, rounded
size:
fullwidth
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
unitsstring-Specify a unit identification string. Such as em, px, and so on.
namestring-Name is not deprecated when used with form fields.
maxLengthnumber-Defines the maximum number of characters
colsnumber-The cols attribute specifies the visible width of a text area.
rowsnumber-The rows attribute specifies the visible height of a text area, in lines.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.

Select

import {Select} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
optionsJSON Object Literals-Set the default value using JSON string format for menu of options, like this: {"Option 1":"value-1","Option 2":"value-2","Option 3":"value-3"}
themestring | line-The display style of the control
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
corners:
pill, rounded
size:
fullwidth
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.

Custom Select

import {CustomSelect} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
optionsJSON Object Literals-Set the default value using JSON string format for menu of options, like this: {"Option 1":"value-1","Option 2":"value-2","Option 3":"value-3"}
positionstring | top-The position of the menu, the default is the bottom
themestring | line-The display style of the control
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
corners:
pill, rounded
size:
fullwidth
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

Checkbox

import {Checkbox} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
valuestring | boolean-Set a default value for this control. If the value is true, it is selected by default
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.

Radio

import {Radio} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
optionsJSON Object Literals-Set the default value using JSON string format for menu of options, like this: {"Option 1":"value-1","Option 2":"value-2","Option 3":"value-3"}
valuestring-Set a default value for this control
namestring-Name is not deprecated when used with form fields.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

Multiple Select

import {MultiSelect} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
optionsJSON Object Literals-Set the default value using JSON string format for menu of options, like this: {"Option 1":"value-1","Option 2":"value-2","Option 3":"value-3"}
themestring | line-The display style of the control
valuestring-Set a default value for this control
namestring-Name is not deprecated when used with form fields.
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

Single Select

import {SingleSelect} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
optionsJSON Object Literals-Set the default value using JSON string format for menu of options, like this: {"Option 1":"value-1","Option 2":"value-2","Option 3":"value-3"}
targetIDstring-Specify multiple IDs that does not require the prefix #, use the item to control its display or not. Each ID is separated by a comma
themestring | line-The display style of the control
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
corners:
pill, rounded
valuestring-Set a default value for this control
namestring-Name is not deprecated when used with form fields.
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

Date

import {Date} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
defaultNowbooleanfalseIf the value is true, the current date and time are used
timedate | datetime-local-To create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
themestring | line-The display style of the control
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
corners:
pill, rounded
size:
fullwidth, small, medium, large
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.

Number

import {Number} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
minnumber-The minimum value to accept
maxnumber-The maximum value to accept
decimalsnumber0Formats a number using fixed-point notation.
btnStepMinusnumber1The minimum minus value after the button is triggered
btnStepPlusnumber1The amount of plus value after the button is triggered
stepnumber0.01A stepping interval to use when using up and down arrows to adjust the value, as well as for validation
themestring | line-The display style of the control
valuestring-Set a default value for this control
namestring-Name is not deprecated when used with form fields.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.

Switch

import {Switch} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
targetIDstring-Specify an ID that does not require the prefix #, use the switch to control its display or not
uistring-The overlay style of the control. Can be used at the same time, separated by spaces. The optional values are:
corners:
pill, rounded
textOffstringoffThe content to be shown when the state is unchecked
textOnstringonThe content to be shown when the state is checked
valuestring | boolean-Set a default value for this control. If the value is true, it is selected by default
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
disabledbooleanfalseWhether the input is disabled
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.

Dynamic Fields

import {DynamicFields} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
valuestring-Set a default value for this control
removeLabelstring-The label of the button to delete current item, if it is not set, only the X icon will be included
addLabelstringAdd newThe label of the button to add a new item
tempHtmlStringstring | ReactNode-Control group are dynamically added after the button is triggered. Like this:
<><Input placeholder="Title" name="your-title[]" /> <Input ui="medium" placeholder="URL" name="your-url[]" /></>
maxFieldsnumber10Maximum number of control group allowed to be added

File

import {File} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.

File Field

import {FileField} from '@uixkit.react/components/Form/index.tsx';
PropertyTypeDefaultDescription
valuestring-Set a default value for this control
labelstring | ReactNode-It is used to specify a label for an element of a form.
namestring-Name is not deprecated when used with form fields.
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.

It accepts all props which this control support.