Form controls and input components for collecting user data including text inputs, selections, date pickers, upload functionality, and form validation. These components provide comprehensive data collection capabilities with built-in validation and accessibility features.
Text-based input controls for various data types and formats.
/**
* Basic text input component
*/
export function Input(props: InputProps): JSX.Element;
/**
* Input group for combining inputs with addons
*/
export function InputGroup(props: InputGroupProps): JSX.Element;
/**
* Password input with visibility toggle
*/
export function InputPassword(props: InputPasswordProps): JSX.Element;
/**
* Search input with search functionality
*/
export function InputSearch(props: InputSearchProps): JSX.Element;
/**
* Multi-line text input
*/
export function Textarea(props: TextareaProps): JSX.Element;
/**
* Numeric input with increment/decrement controls
*/
export function InputNumber(props: InputNumberProps): JSX.Element;
// Input Types
interface InputProps {
modelValue?: string;
defaultValue?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
maxLength?: number;
showWordLimit?: boolean;
prefix?: string;
suffix?: string;
onInput?: (value: string, event: Event) => void;
onChange?: (value: string, event: Event) => void;
onPressEnter?: (event: Event) => void;
onClear?: (event: Event) => void;
onFocus?: (event: Event) => void;
onBlur?: (event: Event) => void;
}
interface TextareaProps {
modelValue?: string;
defaultValue?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
maxLength?: number;
showWordLimit?: boolean;
allowClear?: boolean;
autoSize?: boolean | { minRows?: number; maxRows?: number };
onInput?: (value: string, event: Event) => void;
onChange?: (value: string, event: Event) => void;
}
interface InputNumberProps {
modelValue?: number;
defaultValue?: number;
mode?: 'embed' | 'button';
precision?: number;
step?: number;
min?: number;
max?: number;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
placeholder?: string;
hideButton?: boolean;
formatter?: (value: number) => string;
parser?: (value: string) => number;
onChange?: (value: number) => void;
}
interface InputPasswordProps {
visibility?: boolean;
defaultVisibility?: boolean;
invisibleButton?: boolean;
disabled?: boolean;
size?: Size;
placeholder?: string;
onVisibilityChange?: (visibility: boolean) => void;
}
interface InputSearchProps {
searchButton?: boolean;
loading?: boolean;
disabled?: boolean;
size?: Size;
buttonText?: string;
buttonProps?: Record<string, any>;
onSearch?: (value: string, event: Event) => void;
}
interface InputGroupProps {
size?: Size;
compact?: boolean;
}Components for selecting from predefined options including dropdowns, checkboxes, and radio buttons.
/**
* Select dropdown component
*/
export function Select(props: SelectProps): JSX.Element;
/**
* Select option component
*/
export function Option(props: SelectOptionProps): JSX.Element;
/**
* Select option group
*/
export function Optgroup(props: SelectOptGroupProps): JSX.Element;
/**
* Checkbox input component
*/
export function Checkbox(props: CheckboxProps): JSX.Element;
/**
* Checkbox group for multiple selections
*/
export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
/**
* Radio button component
*/
export function Radio(props: RadioProps): JSX.Element;
/**
* Radio group for single selection
*/
export function RadioGroup(props: RadioGroupProps): JSX.Element;
/**
* Switch toggle component
*/
export function Switch(props: SwitchProps): JSX.Element;
// Selection Types
interface SelectProps {
modelValue?: any;
defaultValue?: any;
multiple?: boolean;
placeholder?: string;
disabled?: boolean;
error?: boolean;
size?: Size;
loading?: boolean;
allowClear?: boolean;
allowSearch?: boolean;
allowCreate?: boolean;
maxTagCount?: number;
options?: (string | number | SelectOption)[];
fieldNames?: SelectFieldNames;
filterOption?: boolean | FilterOption;
virtualListProps?: Record<string, any>;
onChange?: (value: any) => void;
onInputValueChange?: (value: string) => void;
onSearch?: (value: string) => void;
onFocus?: (event: Event) => void;
onBlur?: (event: Event) => void;
}
interface SelectOption {
value?: any;
label?: string;
disabled?: boolean;
tagProps?: Record<string, any>;
render?: () => any;
}
interface SelectFieldNames {
value?: string;
label?: string;
disabled?: string;
tagProps?: string;
render?: string;
}
interface CheckboxProps {
modelValue?: boolean;
defaultChecked?: boolean;
value?: any;
disabled?: boolean;
indeterminate?: boolean;
onChange?: (value: boolean, event: Event) => void;
}
interface RadioProps {
modelValue?: any;
value?: any;
disabled?: boolean;
onChange?: (value: any, event: Event) => void;
}
interface SwitchProps {
modelValue?: boolean;
defaultChecked?: boolean;
disabled?: boolean;
loading?: boolean;
type?: 'circle' | 'round' | 'line';
size?: Size;
checkedText?: string;
uncheckedText?: string;
checkedValue?: any;
uncheckedValue?: any;
onChange?: (value: boolean, event: Event) => void;
}Date and time picker components with various selection modes and formats.
/**
* Date picker component
*/
export function DatePicker(props: DatePickerProps): JSX.Element;
/**
* Month picker component
*/
export function MonthPicker(props: MonthPickerProps): JSX.Element;
/**
* Year picker component
*/
export function YearPicker(props: YearPickerProps): JSX.Element;
/**
* Quarter picker component
*/
export function QuarterPicker(props: QuarterPickerProps): JSX.Element;
/**
* Week picker component
*/
export function WeekPicker(props: WeekPickerProps): JSX.Element;
/**
* Date range picker component
*/
export function RangePicker(props: RangePickerProps): JSX.Element;
/**
* Time picker component
*/
export function TimePicker(props: TimePickerProps): JSX.Element;
// Date/Time Types
interface DatePickerProps {
modelValue?: string | Date;
defaultValue?: string | Date;
format?: string;
valueFormat?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
position?: TriggerPosition;
popupVisible?: boolean;
shortcuts?: ShortcutType[];
disabledDate?: (date: Date) => boolean;
onChange?: (dateString: string, date: Date) => void;
onSelect?: (dateString: string, date: Date) => void;
onVisibleChange?: (visible: boolean) => void;
}
interface TimePickerProps {
modelValue?: string;
defaultValue?: string;
format?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
use12Hours?: boolean;
step?: { hour?: number; minute?: number; second?: number };
disabledHours?: () => number[];
disabledMinutes?: (hour: number) => number[];
disabledSeconds?: (hour: number, minute: number) => number[];
onChange?: (timeString: string, time: Date) => void;
}
interface ShortcutType {
label: string;
value: Date | (() => Date);
format?: string;
}
interface MonthPickerProps {
modelValue?: string | Date;
defaultValue?: string | Date;
format?: string;
valueFormat?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
position?: TriggerPosition;
popupVisible?: boolean;
disabledDate?: (date: Date) => boolean;
onChange?: (dateString: string, date: Date) => void;
}
interface YearPickerProps {
modelValue?: string | Date;
defaultValue?: string | Date;
format?: string;
valueFormat?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
position?: TriggerPosition;
popupVisible?: boolean;
disabledDate?: (date: Date) => boolean;
onChange?: (dateString: string, date: Date) => void;
}
interface QuarterPickerProps {
modelValue?: string | Date;
defaultValue?: string | Date;
format?: string;
valueFormat?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
position?: TriggerPosition;
popupVisible?: boolean;
disabledDate?: (date: Date) => boolean;
onChange?: (dateString: string, date: Date) => void;
}
interface WeekPickerProps {
modelValue?: string | Date;
defaultValue?: string | Date;
format?: string;
valueFormat?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
position?: TriggerPosition;
popupVisible?: boolean;
dayStartOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
disabledDate?: (date: Date) => boolean;
onChange?: (dateString: string, date: Date) => void;
}Complex selection components for hierarchical and searchable data.
/**
* Cascading selector for hierarchical data
*/
export function Cascader(props: CascaderProps): JSX.Element;
/**
* Cascader panel component
*/
export function CascaderPanel(props: CascaderPanelProps): JSX.Element;
/**
* Tree select component
*/
export function TreeSelect(props: TreeSelectProps): JSX.Element;
/**
* Auto-complete input component
*/
export function AutoComplete(props: AutoCompleteProps): JSX.Element;
/**
* Tag input component
*/
export function InputTag(props: InputTagProps): JSX.Element;
/**
* Mention input for @mentions
*/
export function Mention(props: MentionProps): JSX.Element;
/**
* Star rating component
*/
export function Rate(props: RateProps): JSX.Element;
/**
* Slider input component
*/
export function Slider(props: SliderProps): JSX.Element;
/**
* Color picker component
*/
export function ColorPicker(props: ColorPickerProps): JSX.Element;
// Advanced Selection Types
interface CascaderProps {
modelValue?: any[];
defaultValue?: any[];
options?: CascaderOption[];
expandTrigger?: 'click' | 'hover';
multiple?: boolean;
checkStrictly?: boolean;
fieldNames?: CascaderFieldNames;
placeholder?: string;
disabled?: boolean;
error?: boolean;
size?: Size;
allowClear?: boolean;
allowSearch?: boolean;
loading?: boolean;
onChange?: (value: any[], selectedOptions: CascaderOption[]) => void;
}
interface CascaderOption {
value?: any;
label?: string;
disabled?: boolean;
children?: CascaderOption[];
}
interface CascaderFieldNames {
value?: string;
label?: string;
disabled?: string;
children?: string;
}
interface InputTagProps {
modelValue?: TagData[];
defaultValue?: TagData[];
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
size?: Size;
max?: number;
allowClear?: boolean;
retainInputValue?: boolean;
formatTag?: (data: TagData) => string;
uniqueValue?: boolean;
fieldNames?: InputTagFieldNames;
onChange?: (value: TagData[]) => void;
}
interface TagData {
value: any;
label?: string;
closable?: boolean;
}
interface RateProps {
modelValue?: number;
defaultValue?: number;
count?: number;
allowHalf?: boolean;
allowClear?: boolean;
grading?: boolean;
readonly?: boolean;
disabled?: boolean;
character?: string;
onChange?: (value: number) => void;
}Components for organizing and validating form data.
/**
* Form container with validation capabilities
*/
export function Form(props: FormProps): JSX.Element;
/**
* Form item wrapper with label and validation
*/
export function FormItem(props: FormItemProps): JSX.Element;
// Form Types
interface FormProps {
model?: Record<string, any>;
layout?: 'horizontal' | 'vertical' | 'inline';
size?: Size;
labelColProps?: Record<string, any>;
wrapperColProps?: Record<string, any>;
labelAlign?: 'left' | 'right';
disabled?: boolean;
rules?: Record<string, FieldRule | FieldRule[]>;
autoLabelWidth?: boolean;
onSubmit?: (values: Record<string, any>) => void;
onSubmitSuccess?: (values: Record<string, any>) => void;
onSubmitFailed?: (errors: Record<string, ValidatedError>) => void;
}
interface FormItemProps {
field?: string;
label?: string;
showColon?: boolean;
noStyle?: boolean;
disabled?: boolean;
help?: string;
extra?: string;
required?: boolean;
asteriskPosition?: 'start' | 'end';
rules?: FieldRule | FieldRule[];
validateStatus?: ValidateStatus;
validateTrigger?: ValidateTrigger | ValidateTrigger[];
labelColProps?: Record<string, any>;
wrapperColProps?: Record<string, any>;
hideLabel?: boolean;
hideAsterisk?: boolean;
labelAlign?: 'left' | 'right';
contentFlex?: boolean;
contentClass?: string;
mergeProps?: boolean | ((props: Record<string, any>) => Record<string, any>);
labelColStyle?: Record<string, any>;
wrapperColStyle?: Record<string, any>;
rowProps?: Record<string, any>;
rowClass?: string;
contentWrapper?: boolean;
onFieldChange?: FormItemEventHandler;
onFieldBlur?: FormItemEventHandler;
}
interface FieldRule<FieldValue = any> {
type?: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'email' | 'url' | 'ip';
required?: boolean;
message?: string;
length?: number;
maxLength?: number;
minLength?: number;
match?: RegExp;
uppercase?: boolean;
lowercase?: boolean;
min?: number;
max?: number;
equal?: number;
positive?: boolean;
negative?: boolean;
true?: boolean;
false?: boolean;
includes?: any[];
deepEqual?: any;
empty?: boolean;
hasKeys?: string[];
validator?: (value: FieldValue | undefined, callback: (error?: string) => void) => void;
}
type ValidateStatus = 'success' | 'warning' | 'error' | 'validating';
type ValidateTrigger = 'change' | 'input' | 'focus' | 'blur';
interface ValidatedError {
label: string;
field: string;
value: any;
type: string;
isRequiredError: boolean;
message: string;
}File upload functionality with progress tracking and validation.
/**
* File upload component
*/
export function Upload(props: UploadProps): JSX.Element;
// Upload Types
interface UploadProps {
fileList?: FileItem[];
defaultFileList?: FileItem[];
accept?: string;
action?: string;
disabled?: boolean;
multiple?: boolean;
directory?: boolean;
drag?: boolean;
tip?: string;
headers?: Record<string, string>;
data?: Record<string, any> | ((fileItem: FileItem) => Record<string, any>);
limit?: number;
autoUpload?: boolean;
showFileList?: boolean;
showRemoveButton?: boolean;
showRetryButton?: boolean;
showCancelButton?: boolean;
imagePreview?: boolean;
listType?: 'text' | 'picture' | 'picture-card';
customRequest?: (option: RequestOption) => UploadRequest;
beforeUpload?: (file: File) => boolean | Promise<boolean>;
onChange?: (fileList: FileItem[], fileItem: FileItem) => void;
onProgress?: (fileItem: FileItem, event: Event) => void;
onPreview?: (fileItem: FileItem) => void;
onRemove?: (fileItem: FileItem) => void;
onBeforeRemove?: (fileItem: FileItem) => boolean | Promise<boolean>;
onButtonClick?: (event: Event) => void;
onExceedLimit?: (fileList: FileItem[], files: File[]) => void;
}
interface FileItem {
uid: string;
status?: FileStatus;
file?: File;
percent?: number;
response?: any;
url?: string;
name?: string;
}
type FileStatus = 'init' | 'uploading' | 'done' | 'error';
interface RequestOption {
action: string;
filename: string;
file: File;
data: Record<string, any>;
headers: Record<string, string>;
onProgress: (percent: number, event?: Event) => void;
onError: (error: Error, response?: any) => void;
onSuccess: (response: any) => void;
}
interface UploadRequest {
abort: () => void;
}Usage Examples:
<template>
<!-- Basic form with validation -->
<a-form :model="formData" :rules="rules" @submit="handleSubmit">
<a-form-item field="name" label="Name">
<a-input v-model="formData.name" placeholder="Enter your name" />
</a-form-item>
<a-form-item field="email" label="Email">
<a-input v-model="formData.email" placeholder="Enter your email" />
</a-form-item>
<a-form-item field="age" label="Age">
<a-input-number v-model="formData.age" :min="0" :max="120" />
</a-form-item>
<a-form-item field="gender" label="Gender">
<a-radio-group v-model="formData.gender">
<a-radio value="male">Male</a-radio>
<a-radio value="female">Female</a-radio>
<a-radio value="other">Other</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item field="interests" label="Interests">
<a-checkbox-group v-model="formData.interests">
<a-checkbox value="sports">Sports</a-checkbox>
<a-checkbox value="music">Music</a-checkbox>
<a-checkbox value="reading">Reading</a-checkbox>
</a-checkbox-group>
</a-form-item>
<a-form-item field="birthdate" label="Birth Date">
<a-date-picker v-model="formData.birthdate" />
</a-form-item>
<a-form-item>
<a-button html-type="submit" type="primary">Submit</a-button>
</a-form-item>
</a-form>
</template>Transfer list component for moving items between lists with search and selection capabilities.
/**
* Transfer list component for moving items between lists
*/
export function Transfer(props: TransferProps): JSX.Element;
interface TransferProps {
dataSource?: any[];
targetKeys?: (string | number)[];
defaultTargetKeys?: (string | number)[];
selectedKeys?: (string | number)[];
defaultSelectedKeys?: (string | number)[];
render?: (item: any) => any;
disabled?: boolean;
oneWay?: boolean;
simple?: boolean;
searchable?: boolean;
searchPlaceholder?: string;
listStyle?: Record<string, any>;
operationStyle?: Record<string, any>;
operationTexts?: string[];
titleTexts?: string[];
onChange?: (targetKeys: (string | number)[], direction: 'source' | 'target', moveKeys: (string | number)[]) => void;
onSearch?: (value: string, type: 'source' | 'target') => void;
onSelectChange?: (leftSelectedKeys: (string | number)[], rightSelectedKeys: (string | number)[]) => void;
}Usage Examples:
<!-- Transfer component -->
<a-transfer
:data-source="transferData"
:target-keys="targetKeys"
:title-texts="['Source', 'Target']"
searchable
@change="handleTransferChange"
/>
<script>
export default {
data() {
return {
transferData: [
{ key: '1', title: 'Item 1' },
{ key: '2', title: 'Item 2' },
{ key: '3', title: 'Item 3' }
],
targetKeys: ['2']
};
},
methods: {
handleTransferChange(targetKeys, direction, moveKeys) {
this.targetKeys = targetKeys;
}
}
};
</script>// Instance types for template refs
export type FormInstance = InstanceType<typeof Form>;
export type FormItemInstance = InstanceType<typeof FormItem>;
export type InputInstance = InstanceType<typeof Input>;
export type InputPasswordInstance = InstanceType<typeof InputPassword>;
export type InputSearchInstance = InstanceType<typeof InputSearch>;
export type InputGroupInstance = InstanceType<typeof InputGroup>;
export type TextareaInstance = InstanceType<typeof Textarea>;
export type InputNumberInstance = InstanceType<typeof InputNumber>;
export type SelectInstance = InstanceType<typeof Select>;
export type CheckboxInstance = InstanceType<typeof Checkbox>;
export type CheckboxGroupInstance = InstanceType<typeof CheckboxGroup>;
export type RadioInstance = InstanceType<typeof Radio>;
export type RadioGroupInstance = InstanceType<typeof RadioGroup>;
export type SwitchInstance = InstanceType<typeof Switch>;
export type DatePickerInstance = InstanceType<typeof DatePicker>;
export type MonthPickerInstance = InstanceType<typeof MonthPicker>;
export type YearPickerInstance = InstanceType<typeof YearPicker>;
export type QuarterPickerInstance = InstanceType<typeof QuarterPicker>;
export type WeekPickerInstance = InstanceType<typeof WeekPicker>;
export type TimePickerInstance = InstanceType<typeof TimePicker>;
export type CascaderInstance = InstanceType<typeof Cascader>;
export type TreeSelectInstance = InstanceType<typeof TreeSelect>;
export type AutoCompleteInstance = InstanceType<typeof AutoComplete>;
export type InputTagInstance = InstanceType<typeof InputTag>;
export type MentionInstance = InstanceType<typeof Mention>;
export type RateInstance = InstanceType<typeof Rate>;
export type SliderInstance = InstanceType<typeof Slider>;
export type ColorPickerInstance = InstanceType<typeof ColorPicker>;
export type UploadInstance = InstanceType<typeof Upload>;
export type TransferInstance = InstanceType<typeof Transfer>;