import { OntarioDropdownList } from '@ongov/ontario-design-system-component-library-react';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# ontario-dropdown-list
Only use a dropdown (select) list if you cannot use other form components to capture the user’s information.
## Usage Guidance
Please refer to the [Ontario Design System](https://designsystem.ontario.ca/components/detail/dropdown-lists.html) for current documentation guidance.
### Disabled and read-only states
This component intentionally does not provide `readOnly` or `disabled` props.
Disabling form controls can create accessibility and usability barriers, and often does not explain what the user needs to fix.
Instead:
- keep controls and submission actions available
- use validation and error messaging to clearly identify missing or invalid input
For implementation examples, see [Error messaging](#error-messaging).
Source: https://designsystem.ontario.ca/components/detail/buttons.html#disabled-buttons
## Configuration
Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the dropdown list component can be added directly into the project's code, and can be customized by updating the properties outlined [here](#properties). Additional information on custom types for dropdown list properties are outlined [here](#custom-property-types). Please see the [examples](#examples) below for how to configure the component.
## Examples
Example of a dropdown list component with no `elementId` or `isEmptyStartOption` props passed. Note that by default, an ID for the `elementId` will be generated if none is provided. If no `isEmptyStartOption` prop is provided, it will default to `false` and display the first option in the `options` list, unless one of the options has a `selected` attribute set to `true`.
```mdx-code-block
```
```html
```
```mdx-code-block
```
```tsx
```
```mdx-code-block
```
```html
```
```mdx-code-block
```
In the following example, the selected option is set using the component's
`value`. Listen for the component `input` or `change` event to read the current
selection.
```mdx-code-block
```
```html
```
```mdx-code-block
```
```tsx
{
console.log((event.target as HTMLOntarioDropdownListElement).value);
}}
onChange={(event) => {
console.log((event.target as HTMLOntarioDropdownListElement).value);
console.log(event.detail.value);
}}
/>
```
```mdx-code-block
```
```html
```
```ts
handleDropdownChange(event: Event) {
console.log((event.target as HTMLOntarioDropdownListElement).value);
console.log((event as CustomEvent<{ value: string }>).detail.value);
}
```
```mdx-code-block
```
In the following example, all available props are passed through.
```mdx-code-block
```
```html
```
```mdx-code-block
```
```tsx
```
```mdx-code-block
```
```html
```
```mdx-code-block
```
### Forms
The `ontario-dropdown-list` supports integration with native HTML `