Comprehensive form input components for building interactive forms with validation, accessibility, and consistent styling across all input types.
Interactive button elements with multiple styles, sizes, and states for user actions.
/**
* Primary button component with click handling and various visual styles
*/
const Button = Vue.component;
// Props interface for Button component
interface ButtonProps {
size?: 'large' | 'medium' | 'small' | 'mini';
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
plain?: boolean;
round?: boolean;
circle?: boolean;
loading?: boolean;
disabled?: boolean;
icon?: string;
autofocus?: boolean;
nativeType?: 'button' | 'submit' | 'reset' | 'menu';
}
/**
* Button group container for related button sets
*/
const ButtonGroup = Vue.component;Usage Examples:
// Basic button usage
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button disabled>Disabled</el-button>
// Button with loading state
<el-button :loading="isLoading" @click="handleSubmit">
Submit
</el-button>
// Button group
<el-button-group>
<el-button type="primary" icon="el-icon-left">Previous</el-button>
<el-button type="primary">Next<i class="el-icon-right el-icon--right"></i></el-button>
</el-button-group>Text input elements with validation, formatting, and various input types.
/**
* Text input component with v-model support
*/
const Input = Vue.component;
interface InputProps {
value?: string | number;
placeholder?: string;
clearable?: boolean;
showPassword?: boolean;
showWordLimit?: boolean;
readonly?: boolean;
disabled?: boolean;
type?: string;
size?: 'large' | 'medium' | 'small' | 'mini';
rows?: number;
autosize?: boolean | object;
maxlength?: number;
minlength?: number;
max?: number;
min?: number;
step?: number;
resize?: 'none' | 'both' | 'horizontal' | 'vertical';
autofocus?: boolean;
form?: string;
label?: string;
tabindex?: string;
validateEvent?: boolean;
suffixIcon?: string;
prefixIcon?: string;
}
/**
* Numeric input with increment/decrement controls
*/
const InputNumber = Vue.component;
interface InputNumberProps {
value?: number;
min?: number;
max?: number;
step?: number;
stepStrictly?: boolean;
precision?: number;
size?: 'large' | 'medium' | 'small' | 'mini';
disabled?: boolean;
controls?: boolean;
controlsPosition?: 'right';
name?: string;
label?: string;
placeholder?: string;
}Usage Examples:
// Text input with v-model
<el-input
v-model="input"
placeholder="Please input"
clearable>
</el-input>
// Password input
<el-input
v-model="password"
type="password"
placeholder="Password"
show-password>
</el-input>
// Textarea
<el-input
v-model="textarea"
type="textarea"
:rows="2"
placeholder="Please input">
</el-input>
// Numeric input
<el-input-number
v-model="num"
:min="1"
:max="10"
label="Number">
</el-input-number>Components for selecting from predefined options including radio buttons, checkboxes, and dropdown selects.
/**
* Radio button for single selection
*/
const Radio = Vue.component;
interface RadioProps {
value?: string | number | boolean;
label?: string | number | boolean;
disabled?: boolean;
border?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
name?: string;
}
/**
* Radio group container for multiple radio options
*/
const RadioGroup = Vue.component;
/**
* Radio button styled as a button
*/
const RadioButton = Vue.component;
/**
* Checkbox for multiple selections
*/
const Checkbox = Vue.component;
interface CheckboxProps {
value?: string | number | boolean;
label?: string | number | boolean;
indeterminate?: boolean;
disabled?: boolean;
checked?: boolean;
name?: string;
trueLabel?: string | number;
falseLabel?: string | number;
border?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
}
/**
* Checkbox group container
*/
const CheckboxGroup = Vue.component;
/**
* Checkbox styled as a button
*/
const CheckboxButton = Vue.component;
/**
* Toggle switch component
*/
const Switch = Vue.component;
interface SwitchProps {
value?: boolean;
disabled?: boolean;
width?: number;
activeIconClass?: string;
inactiveIconClass?: string;
activeText?: string;
inactiveText?: string;
activeColor?: string;
inactiveColor?: string;
activeValue?: boolean | string | number;
inactiveValue?: boolean | string | number;
name?: string;
validateEvent?: boolean;
}Usage Examples:
// Radio buttons
<el-radio-group v-model="radio">
<el-radio label="1">Option A</el-radio>
<el-radio label="2">Option B</el-radio>
</el-radio-group>
// Checkboxes
<el-checkbox-group v-model="checkList">
<el-checkbox label="Apple">Apple</el-checkbox>
<el-checkbox label="Orange">Orange</el-checkbox>
<el-checkbox label="Banana">Banana</el-checkbox>
</el-checkbox-group>
// Switch
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>Advanced selection components with search, grouping, and remote data support.
/**
* Dropdown select component
*/
const Select = Vue.component;
interface SelectProps {
value?: any;
multiple?: boolean;
disabled?: boolean;
valueKey?: string;
size?: 'large' | 'medium' | 'small' | 'mini';
clearable?: boolean;
collapseTags?: boolean;
multipleLimit?: number;
name?: string;
autocomplete?: string;
placeholder?: string;
filterable?: boolean;
allowCreate?: boolean;
filterMethod?: Function;
remote?: boolean;
remoteMethod?: Function;
loading?: boolean;
loadingText?: string;
noMatchText?: string;
noDataText?: string;
popperClass?: string;
reserveKeyword?: boolean;
defaultFirstOption?: boolean;
popperAppendToBody?: boolean;
automaticDropdown?: boolean;
}
/**
* Select option component
*/
const Option = Vue.component;
interface OptionProps {
value: any;
label?: string;
disabled?: boolean;
}
/**
* Option group for organizing select options
*/
const OptionGroup = Vue.component;
/**
* Autocomplete input with suggestions
*/
const Autocomplete = Vue.component;
interface AutocompleteProps {
value?: string;
debounce?: number;
placeholder?: string;
disabled?: boolean;
valueKey?: string;
icon?: string;
customItem?: string;
fetchSuggestions: (queryString: string, callback: Function) => void;
popperClass?: string;
triggerOnFocus?: boolean;
selectWhenUnmatched?: boolean;
hideLoading?: boolean;
popperAppendToBody?: boolean;
highlightFirstItem?: boolean;
}Usage Examples:
// Basic select
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
// Multiple select with search
<el-select
v-model="value"
multiple
filterable
placeholder="Choose">
<el-option-group label="Group 1">
<el-option label="Option 1" value="1"></el-option>
</el-option-group>
</el-select>
// Autocomplete
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
placeholder="Please Input"
@select="handleSelect">
</el-autocomplete>Form container and field components with comprehensive validation support.
/**
* Form container with validation
*/
const Form = Vue.component;
interface FormProps {
model?: object;
rules?: object;
labelPosition?: 'right' | 'left' | 'top';
labelWidth?: string;
labelSuffix?: string;
inline?: boolean;
inlineMessage?: boolean;
statusIcon?: boolean;
showMessage?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
disabled?: boolean;
validateOnRuleChange?: boolean;
hideRequiredAsterisk?: boolean;
}
/**
* Form field wrapper with label and validation
*/
const FormItem = Vue.component;
interface FormItemProps {
label?: string;
labelWidth?: string;
prop?: string;
required?: boolean;
rules?: object | array;
error?: string;
showMessage?: boolean;
inlineMessage?: boolean | string;
size?: 'large' | 'medium' | 'small' | 'mini';
}
// Validation rule types
interface ValidationRule {
required?: boolean;
message?: string;
trigger?: 'blur' | 'change';
min?: number;
max?: number;
type?: string;
pattern?: RegExp;
validator?: (rule: any, value: any, callback: Function) => void;
}Usage Examples:
// Form with validation
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="Name" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
// Validation rules
rules: {
name: [
{ required: true, message: 'Please input name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
email: [
{ required: true, message: 'Please input email', trigger: 'blur' },
{ type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
]
}Date and time selection components with calendar interface and time picking capabilities.
/**
* Date picker component with calendar interface
*/
const DatePicker = Vue.component;
interface DatePickerProps {
value?: Date | string | Array<Date | string>;
readonly?: boolean;
disabled?: boolean;
editable?: boolean;
clearable?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
placeholder?: string;
startPlaceholder?: string;
endPlaceholder?: string;
type?: 'year' | 'month' | 'date' | 'dates' | 'week' | 'datetime' | 'datetimerange' | 'daterange' | 'monthrange';
format?: string;
align?: 'left' | 'center' | 'right';
popperClass?: string;
pickerOptions?: object;
rangeSeparator?: string;
defaultValue?: Date | Array<Date>;
defaultTime?: string | Array<string>;
valueFormat?: string;
name?: string;
unlinkPanels?: boolean;
prefixIcon?: string;
clearIcon?: string;
validateEvent?: boolean;
}
/**
* Time picker component for time selection
*/
const TimePicker = Vue.component;
interface TimePickerProps {
value?: Date | string;
readonly?: boolean;
disabled?: boolean;
editable?: boolean;
clearable?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
placeholder?: string;
startPlaceholder?: string;
endPlaceholder?: string;
isRange?: boolean;
arrowControl?: boolean;
align?: 'left' | 'center' | 'right';
popperClass?: string;
pickerOptions?: object;
rangeSeparator?: string;
valueFormat?: string;
defaultValue?: Date | string;
name?: string;
prefixIcon?: string;
clearIcon?: string;
validateEvent?: boolean;
}
/**
* Time select component with predefined time options
*/
const TimeSelect = Vue.component;
interface TimeSelectProps {
value?: string;
disabled?: boolean;
editable?: boolean;
clearable?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
placeholder?: string;
name?: string;
prefixIcon?: string;
clearIcon?: string;
start?: string;
end?: string;
step?: string;
minTime?: string;
maxTime?: string;
}Usage Examples:
// Date picker
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day">
</el-date-picker>
// Date range picker
<el-date-picker
v-model="value2"
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
</el-date-picker>
// DateTime picker
<el-date-picker
v-model="value3"
type="datetime"
placeholder="Select date and time">
</el-date-picker>
// Time picker
<el-time-picker
v-model="value4"
placeholder="Arbitrary time">
</el-time-picker>
// Time range picker
<el-time-picker
is-range
v-model="value5"
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time">
</el-time-picker>
// Time select
<el-time-select
v-model="value6"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="Select time">
</el-time-select>Specialized input components for complex data types and interactions.
/**
* Slider component for range selection
*/
const Slider = Vue.component;
interface SliderProps {
value?: number | array;
min?: number;
max?: number;
disabled?: boolean;
step?: number;
showInput?: boolean;
showInputControls?: boolean;
inputSize?: 'large' | 'medium' | 'small' | 'mini';
showStops?: boolean;
showTooltip?: boolean;
formatTooltip?: Function;
range?: boolean;
vertical?: boolean;
height?: string;
label?: string;
debounce?: number;
tooltipClass?: string;
marks?: object;
}
/**
* Color picker component
*/
const ColorPicker = Vue.component;
interface ColorPickerProps {
value?: string;
disabled?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
showAlpha?: boolean;
colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb';
popperClass?: string;
predefine?: array;
}
/**
* Rate component for rating input
*/
const Rate = Vue.component;
interface RateProps {
value?: number;
max?: number;
disabled?: boolean;
allowHalf?: boolean;
lowThreshold?: number;
highThreshold?: number;
colors?: array | object;
voidColor?: string;
disabledVoidColor?: string;
iconClasses?: array | object;
voidIconClass?: string;
disabledVoidIconClass?: string;
showText?: boolean;
showScore?: boolean;
textColor?: string;
texts?: array;
scoreTemplate?: string;
}
/**
* File upload component
*/
const Upload = Vue.component;
interface UploadProps {
action: string;
headers?: object;
multiple?: boolean;
data?: object;
name?: string;
withCredentials?: boolean;
showFileList?: boolean;
drag?: boolean;
accept?: string;
onPreview?: Function;
onRemove?: Function;
onSuccess?: Function;
onError?: Function;
onProgress?: Function;
onChange?: Function;
beforeUpload?: Function;
beforeRemove?: Function;
listType?: 'text' | 'picture' | 'picture-card';
autoUpload?: boolean;
fileList?: array;
disabled?: boolean;
limit?: number;
onExceed?: Function;
httpRequest?: Function;
}Usage Examples:
// Slider
<el-slider
v-model="value"
:min="0"
:max="100"
show-input>
</el-slider>
// Color picker
<el-color-picker
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
// Rate
<el-rate
v-model="value"
:colors="colors"
:max="5"
show-text>
</el-rate>
// Upload
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">Click to upload</el-button>
</el-upload>Advanced selection and input components for complex data structures and workflows.
/**
* Cascader component for hierarchical selection
*/
const Cascader = Vue.component;
interface CascaderProps {
value?: any[];
options?: any[];
props?: object;
size?: 'large' | 'medium' | 'small' | 'mini';
placeholder?: string;
disabled?: boolean;
clearable?: boolean;
expandTrigger?: 'click' | 'hover';
showAllLevels?: boolean;
filterable?: boolean;
separator?: string;
debounce?: number;
changeOnSelect?: boolean;
popperClass?: string;
popperAppendToBody?: boolean;
filterMethod?: Function;
beforeFilter?: Function;
}
/**
* CascaderPanel component - the core cascading selection panel
*/
const CascaderPanel = Vue.component;
interface CascaderPanelProps {
value?: any | any[]; // v-model binding value
options?: CascaderOption[]; // Data source for cascader options
props?: CascaderPanelConfig; // Configuration options object
border?: boolean; // Whether to show border around panel
renderLabel?: Function; // Custom render function for node labels
}
interface CascaderPanelConfig {
expandTrigger?: 'click' | 'hover'; // How to trigger option expansion
multiple?: boolean; // Enable multiple selection
checkStrictly?: boolean; // Independent node selection
emitPath?: boolean; // Whether to emit full path or just leaf value
lazy?: boolean; // Enable dynamic loading of child nodes
lazyLoad?: Function; // Function for loading child node data
value?: string; // Key name for node value property
label?: string; // Key name for node label property
children?: string; // Key name for node children property
disabled?: string; // Key name for node disabled property
leaf?: string; // Key name for node leaf property
hoverThreshold?: number; // Hover delay threshold (ms) for hover trigger
}
interface CascaderOption {
label: string; // Display text for the option
value: any; // Value identifier for the option
children?: CascaderOption[]; // Child options (for nested structure)
disabled?: boolean; // Whether option is disabled
leaf?: boolean; // Whether option is a leaf node
}
/**
* Transfer component for moving items between lists
*/
const Transfer = Vue.component;
interface TransferProps {
value?: any[];
data?: any[];
filterable?: boolean;
filterPlaceholder?: string;
filterMethod?: Function;
targetOrder?: 'original' | 'push' | 'unshift';
titles?: string[];
buttonTexts?: string[];
renderContent?: Function;
format?: object;
props?: object;
leftDefaultChecked?: any[];
rightDefaultChecked?: any[];
}
/**
* Steps component for step-by-step workflow
*/
const Steps = Vue.component;
interface StepsProps {
space?: number | string;
direction?: 'vertical' | 'horizontal';
active?: number;
processStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
finishStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
alignCenter?: boolean;
simple?: boolean;
}
/**
* Individual step component
*/
const Step = Vue.component;
interface StepProps {
title?: string;
description?: string;
icon?: string;
status?: 'wait' | 'process' | 'finish' | 'error' | 'success';
}Usage Examples:
// Cascader
<el-cascader
v-model="value"
:options="options"
@change="handleChange">
</el-cascader>
// Cascader with custom props
<el-cascader
v-model="value"
:options="options"
:props="{ checkStrictly: true }"
clearable>
</el-cascader>
// CascaderPanel - Basic usage
<el-cascader-panel
v-model="selectedValue"
:options="cascaderOptions">
</el-cascader-panel>
// CascaderPanel - Multiple selection
<el-cascader-panel
v-model="multipleValues"
:options="options"
:props="{ multiple: true }">
</el-cascader-panel>
// CascaderPanel - Custom node rendering
<el-cascader-panel :options="options">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="data.code"> ({{ data.code }})</span>
</template>
</el-cascader-panel>
// CascaderPanel - Dynamic loading
<el-cascader-panel
:options="[]"
:props="{ lazy: true, lazyLoad: loadNodes }">
</el-cascader-panel>
// Transfer
<el-transfer
v-model="value"
:data="data"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
@change="handleChange">
</el-transfer>
// Transfer with search
<el-transfer
v-model="value"
filterable
:filter-method="filterMethod"
filter-placeholder="State"
:data="data">
</el-transfer>
// Steps
<el-steps :active="active" finish-status="success">
<el-step title="Step 1" description="This is a description."></el-step>
<el-step title="Step 2" description="This is a description."></el-step>
<el-step title="Step 3" description="This is a description."></el-step>
</el-steps>
// Vertical steps
<el-steps direction="vertical" :active="1">
<el-step title="Step 1" description="This is a description"></el-step>
<el-step title="Step 2" description="This is a description"></el-step>
<el-step title="Step 3" description="This is a description" status="error"></el-step>
</el-steps>