> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# SelectField Dropdown Select

> Documentation for the SelectField dropdown select component. Learn about options data source, search, linkage, and other properties for making a single selection from a limited set of options.

## When to Use

Use to replace the native select and choose an option from a limited set. The core capability is selection.

## Component Example

## Component Properties

| Attribute          | Description                                                                                                          | Type                                                             | Default                                                                                                                |
| ------------------ | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `autoWidth`        | Whether the dropdown menu aligns with the selector.                                                                  | `boolean`                                                        | `true`                                                                                                                 |
| `behavior`         | Display state of the form component.                                                                                 | [Behavior](/open/yida/components/interface#behavior)             | `'NORMAL'`                                                                                                             |
| `dataSource`       | Configure options.                                                                                                   | [DataSource\[\]](/open/yida/components/interface#datasource)     | `[ { "text": "Option 1", "value": "1" }, { "text": "Option 2", "value": "2" }, { "text": "Option 3", "value": "3" } ]` |
| `filter`           | Local filtering method. Takes effect only when local filtering is enabled.                                           | `(value: string, data: DataSource) => boolean`                   | -                                                                                                                      |
| `filterLocal`      | Whether local filtering is supported. Turn off when the data source is remote.                                       | `boolean`                                                        | -                                                                                                                      |
| `hasArrow`         | Whether to show the dropdown arrow.                                                                                  | `boolean`                                                        | `true`                                                                                                                 |
| `hasBorder`        | Whether to show a border.                                                                                            | `boolean`                                                        | `true`                                                                                                                 |
| `hasClear`         | Whether to show the clear button.                                                                                    | `boolean`                                                        | `true`                                                                                                                 |
| `label`            | Title of the form component.                                                                                         | `string`                                                         | -                                                                                                                      |
| `labelAlign`       | Position of the form component title.                                                                                | `'left' \| 'top'`                                                | `'top'`                                                                                                                |
| `labelColOffset`   | Offset position of the title. The value uses grid units, where 1 represents 1/24.                                    | `number`                                                         | `0`                                                                                                                    |
| `labelColSpan`     | Width of the title area. The value uses grid units, where 1 represents 1/24.                                         | `number`                                                         | `4`                                                                                                                    |
| `labelTextAlign`   | Text alignment of the form component title.                                                                          | `'left' \| 'right'`                                              | `'right'`                                                                                                              |
| `labelTipsIcon`    | Icon of the title tips entry. Takes effect when labelTipsTypes is set to **text** or **render**.                     | `string`                                                         | -                                                                                                                      |
| `labelTipsRender`  | Custom render method for the title tips. Takes effect when labelTipsTypes is set to **render**.                      | `(props: IComponentProps) => ReactNode`                          | -                                                                                                                      |
| `labelTipsText`    | Text content of the title tips. Takes effect when labelTipsTypes is set to **text**.                                 | `string`                                                         | -                                                                                                                      |
| `labelTipsTypes`   | Type of the title tips.                                                                                              | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes) | `'none'`                                                                                                               |
| `notFoundContent`  | Text displayed when there is no matching option.                                                                     | `string`                                                         | `'Please enter'`                                                                                                       |
| `onChange`         | Event triggered when the component value changes.                                                                    | `(value: string) => void`                                        | -                                                                                                                      |
| `onRemove`         | Event triggered when a value is removed.                                                                             | `(item: object) => void`                                         | -                                                                                                                      |
| `onSearch`         | Event triggered when the search box value changes.                                                                   | `(keyword: string) => void`                                      | -                                                                                                                      |
| `onVisibleChange`  | Event triggered when the dropdown is shown or hidden.                                                                | `(visible: boolean) => void`                                     | -                                                                                                                      |
| `placeholder`      | Placeholder text of the form component.                                                                              | `string`                                                         | `'Please select'`                                                                                                      |
| `searchDelay`      | Search delay in milliseconds.                                                                                        | `number`                                                         | `300`                                                                                                                  |
| `showSearch`       | Whether search is enabled after expanding the dropdown. Always true in tag mode.                                     | `boolean`                                                        | `true`                                                                                                                 |
| `size`             | Size of the form component.                                                                                          | [Size](/open/yida/components/interface#size)                     | `'medium'`                                                                                                             |
| `tips`             | Description text of the form component, displayed below the control.                                                 | `string`                                                         | -                                                                                                                      |
| `useDetailValue`   | Whether to use the object type \{label, value} for value.                                                            | `boolean`                                                        | `false`                                                                                                                |
| `validation`       | Form validation settings. For details, see the [form validation documentation](/open/yida/guide/concept/validation). | [Validation\[\]](/open/yida/components/interface#validation)     | `[]`                                                                                                                   |
| `value`            | Default value of the current component.                                                                              | `string`                                                         | -                                                                                                                      |
| `wrapperColOffset` | Offset position of the form component. The value uses grid units, where 1 represents 1/24.                           | `number`                                                         | `0`                                                                                                                    |
| `wrapperColSpan`   | Width of the form component area. The value uses grid units, where 1 represents 1/24.                                | `number`                                                         | `0`                                                                                                                    |