docs: 增加 cascader、checkbox、date-picker等输入组件的英文文档 (Tencent#1249)

* docs: 增加 cascader、checkbox、date-picker等输入组件的英文文档

* docs:  md 文档开头的格式规范，description字段前面添加换行，后面添加空格

---------

Co-authored-by: James <jamesezhang@tencent.com>

docs/web/api/cascader.en-US.md

@@ -0,0 +1,103 @@
+---
+title: Cascader
+description: Cascading selectors are useful for data sets that have a clear hierarchical structure that the user can view and select through. in general, a cascade selector include:Selectors and cascades.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Single Cascaded Selector
+
+Provide a single cascade selector, after the selection of each level to display the selected content.
+
+{{ base }}
+
+### Multi-selection cascade selector
+
+Provide multi-choice cascading selector, display multi-choice content through label.
+
+{{ multiple }}
+
+### Collapsible Options Multi-selector
+
+In the case of multiple selections, the selected items are collapsed, and the selected items exceeding the value are collapsed.
+
+{{ collapsed }}
+
+### Cascade selectors of different size
+
+Provide large, medium and small three different height, width selector to adapt to different size layout.
+
+{{ size }}
+
+### Filterable Cascade Selector
+
+Enter the Filter option. It is used in business scenarios with specific requirements. Filter text by default.
+
+{{ filterable }}
+
+### Disabling Cascading Selectors
+
+Cascaded selectors that provide a disabled state.
+
+{{ disabled }}
+
+### Display only the last cascade selector
+
+You can display only the label of the last level of the selected item in the input box, rather than the full path of the selected item.
+
+{{ show-all-levels }}
+
+### Cascading selector for selecting any item
+
+When enabled, you can select any level of options.
+
+{{ check-strictly }}
+
+### Cascaded selector in full path mode
+
+The default input/output value type is the value of the leaf node. The full path value is used when `value-type="full"`
+
+{{ value-type }}
+
+### Customize Selected Value Mode
+
+Only valid for multiple-choice conditions.`  onlyLeaft`indicates that only leaf nodes are selected in any case;`parentFirst`indicates that only parent nodes are selected when all child nodes are selected;`all`indicates that both parent nodes and child nodes are selected.
+
+{{ value-mode }}
+
+### Different Trigger Methods
+
+Submenus can be loaded by different triggering methods.
+
+{{ trigger }}
+
+### Display when the text is too long
+
+When the data text is too long, use the browser `title` to display the long text.
+
+{{ ellipsis }}
+
+### Limit the number of options
+
+Limits the maximum number of selections for a multi-choice selector. This is typically used when you need to limit the number of multi-choice options.
+
+{{ max }}
+
+### Customizing Data Field Aliases
+
+When using `options` to configure drop-down options, if the data fields are not `label` and `value`, you can use `keys` to define aliases.
+
+{{ keys }}
+
+### Dynamic Loading
+
+The selector contents can be customized according to requirements. It is used in business scenarios with complex logic or specific requirements.
+
+{{ load }}
+
+### Cascading Panels
+
+Cascading panel used alone for combination with other triggers
+
+{{ panel }}

docs/web/api/checkbox.en-US.md

@@ -0,0 +1,31 @@
+---
+title: Checkbox
+description: A check box is a selection control that allows the user to toggle between checked and unchecked with a single click.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Basic multi-selection box
+
+The simplest form of multi-selection box, often used for multi-selection of data in the form.
+
+{{ base }}
+
+### Linked Multi-check Box
+
+Linked check boxes are check boxes used in conjunction with other components.
+
+{{ link }}
+
+### Grouped Multi-check Box Groups
+
+A group of check boxes that are combined according to certain attributes.
+
+{{ group }}
+
+### Controlled Class Checkbox
+
+The checkbox supports v-model, controlled and uncontrolled usage.
+
+{{ controlled }}

docs/web/api/color-picker.en-US.md

@@ -0,0 +1,51 @@
+---
+title: ColorPicker
+description: Used for color selection, supports multiple formats.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Panel Color Selector
+
+There is no trigger and the color picker panel is displayed directly.
+
+{{ panel }}
+
+### Color Picker with Trigger Element
+
+Trigger the display selector panel through the trigger, and transparently transfer all attributes to the panel selector component.
+
+{{ trigger }}
+
+### Color selector for different color modes
+
+Support monochrome mode, linear gradient two color mode selection, can be used in a single mode, can also switch between two modes at the same time. Use `colorMode` to configure.
+
+{{ color-mode }}
+
+### Color picker with transparency adjustment
+
+Set `enableAlpha=true` to enable the transparency of the selector.
+
+{{ enable-alpha }}
+
+### Color Selector with Configurable System Color
+
+You can configure the system preset colors through `swatchColors`. If the value is null or [], the system colors will not be displayed.
+
+{{ swatch-color }}
+
+### Configurable Color Selector for Recently Used Color
+
+The most recently used color can be configured through `recentColors`. A value of [] indicates that the "Most Recently Used Color" in the component is used as the standard. If the value length is greater than 0, the "Most Recently Used Color" is displayed based on this value. A value of null does not display Recent Colors at all.
+
+{{ recent-color }}
+
+### Disabling Color Selector
+
+{{ status-disabled }}
+
+### Read-only Color Selector
+
+{{ status-readonly }}

docs/web/api/date-picker.en-US.md

@@ -0,0 +1,97 @@
+---
+title: DatePicker
+description: Use to select a specific date or a range of dates.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Year Selector
+
+Used for year selection. It is used when the user only needs to enter the year information, and is often used in query scenarios where data is recorded by year, such as annual bills.
+
+{{ year }}
+
+### Month Selector
+
+Used for month selection. Use only when the user needs to enter month information.
+
+{{ month }}
+
+### Quarter Selector
+
+Used for quarterly selection. Use only when the user needs to enter quarterly information.
+
+{{ quarter }}
+
+### Week Selector
+
+Used for week selection. Used when the user only needs to enter year + week information.
+
+{{ week }}
+
+### Date Picker
+
+For selection of specific dates. Use only when the user needs to enter very specific date information.
+
+{{ base }}
+
+### Date Time Selector
+
+For date and time associated selections. Used when the user needs to enter a date including a time.
+
+{{ date-time }}
+
+### Date Range Selector
+
+Used for selection of a certain period of time. Used when the user needs to enter a date range.
+
+{{ date-range }}
+
+### Date picker with shortcut label
+
+with a time stamp that can be set in advance. When the date information is regular and needs to be clicked for quick input.
+
+{{ date-presets-alt }}
+
+### Date selector can be disabled
+
+The date that does not support user selection can be disabled from clicking.
+
+{{ disable-date }}
+
+### Selector for specifying the start of the week
+
+You can specify the day of the week from which a week starts through the `firstDayOfWeek` attribute. This is only valid when a date is selected (`mode = date`). The default value is 1, that is, it starts from Monday. You can set it to start from Sunday as follows.
+
+{{ first-day-of-week }}
+
+### Custom Icon Selector
+
+Prefix and suffix icons can be customized through `prefixIcon` and `suffixIcon`.
+
+{{ custom-icon }}
+
+### Date Selection Panel Used Alone
+
+You can use `DatePickerPanel` and `DateRangePickerPanel` separately. You can assemble your own date picker.
+
+{{ panel }}
+
+## FAQ
+
+### The backend data format is special. How can I format the date quickly?
+
+The `onChange` callback event will return the currently selected date object wrapped in `dayjs`. You can format it with the help of a third-party library or use the provided `dayjs` object for custom conversion.
+
+```js
+<DatePicker onChange={(value, { dayjsValue }) => {
+  const data = dayjsValue.format('YYYYMMDD');
+  ...
+}}>
+
+<DateRangePicker onChange={(value, { dayjsValue }) => {
+  const data = dayjsValue.map(d => d.format('YYYYMMDD'));
+  ...
+}}>
+```

docs/web/api/form.en-US.md

@@ -0,0 +1,97 @@
+---
+title: Form
+description: Used to collect, verify and submit data, generally composed of input box, radio box, check box, selector and other controls.
+isComponent: true
+usage: { title: "", description: "" }
+spline: form
+---
+
+### Typical Form
+
+A typical form component contains a variety of form items, such as input boxes, selectors, radio boxes, multicheck boxes, switches, text input, and so on.
+
+- If there is a submit button `<button type="submit">` in the form, the `submit` event will be triggered automatically when the submit button is clicked.
+- If there is a reset button `<button type="reset">` in the form, the `reset` event will be triggered automatically when the reset button is clicked.
+- If there is no submit or reset button in the form and you want to click any button to submit or reset, you can use the component instance methods `submit` and `reset`. For more information, please see the API documentation.
+  {{ base }}
+
+### Login Form
+
+A form specifically for account and password entry for the login page.
+
+{{ login }}
+
+### Forms with Different Alignment
+
+Depending on your goals and constraints, choose the best label alignment, with the default alignment being right.
+
+{{ align }}
+
+### Forms with Different Layout Types
+
+{{ layout }}
+
+### Forms with different reset functions
+
+There are three types of form reset: reset all data to blank, reset all data to initial value, and reset any data to any value.
+
+- The first method is to use `resetType` to control.`empty` means to reset the form to empty, and `initial` means to reset the form data to the initial value. Example: `<Form resetType="initial" />`.
+- The second method: Use the component instance method `reset` to reset the data. For more information, see the API documentation. Example 1:`reset({ type:'initial' })`, Example 2:`reset({ fields:['name'] })`。
+
+{{ reset }}
+
+### Form Items in Different Status
+
+The user is prompted to fill in the form through icons and prompt text.
+
+- Verification status includes success, failure and warning. You can use `successBorder` to control whether to display a green border after verification is successful.
+- Use `statusIcon` to control the verification icon.`FormItem.statusIcon` has higher priority than `Form.statusIcon`. If the value is `true`, the default icon will be displayed. The default icons include success, failure, warning, etc. The icons are different for different statuses.`  statusIcon`value is`false`, no icon is displayed.`  If the value type of statusIcon`is a rendering function, you can customize the status icon on the right.
+
+{{ validator-status }}
+
+### Forms with Different Verification Rules
+
+The built-in verification rules of the form are: `date` / `url` / `email` / `required` / `boolean` / `max` / `min` / `len` / `number` / `enum` / `idcard` / `telnumber` / `pattern`. For verification rule parameters such as `date` / `url` / `email`, see:[https://github.com/validatorjs/validator.js](https://github.com/validatorjs/validator.js)。 See `FormRule` in the API documentation for examples of verification rules.
+
+{{ validator }}
+
+### Forms with Custom Verification Rules
+
+You can configure custom verification rules or asynchronous verification. Different verification results can be set for the same verification rule of the same field.
+
+Use `validator` to define a custom verification function, and support asynchronous return of `Promise`. Different verification results, verification result types, and verification result information can be set for the returned results.
+
+- Example 1:`validator:(val) =&gt; { result:!!  val, message:'This item is required', type:'error' }`。
+- Example 2:`validator:(val) =&gt; new Promise((resolve) =&gt; resolve({ result:false, message:'Verification failed', type:'warning' }))`。 For asynchronous verification, the verification results must be returned in all cases. You should not only return the case where `resolve(false)` fails the verification, but also return the case where `resolve(true)` passes the verification.
+
+{{ custom-validator }}
+
+### The form for clearing verification results
+
+In some complex business scenarios, it is necessary to control whether the verification results are displayed or not. In this case, the instance method `clearValidate` is used to clear the verification results. You can clear the verification results of all or some fields.
+
+{{ clear-validate }}
+
+### Forms for Unified Configuration of Verification Information
+
+Default verification information is required for each rule in `FormRule`. Default verification information can be overwritten by `Form.errorMessage`, and verification information of each rule can be configured globally (ConfigProvider).
+
+{{ error-message }}
+
+### Forms for Complex Data Verification
+
+In many cases, the type of form data is often not only a simple object, but also contains arrays, object array nesting, and so on. Forms support validation of these complex data types.
+
+{{ validate-complicated-data }}
+
+### Disabled Form
+
+You can disable an entire form item using the `disabled` attribute. For custom components, you can use `formControlledComponents` to enable the Form proxy to be disabled.
+
+{{ disabled }}
+
+### Forms for Setting Verification Information
+
+Use the `validateMessage` attribute to customize the form verification information prompt, which is mainly used for non-component internal verification information presentation, such as:The remote validation result of the first rendering of the form. This value must be set to null if you want to enable validation within the component.
+
+{{ validate-message }}