# Select


## Examples

### Default

```html
<m-select
      value=${args.value}
      .name=${args.name ?? ""}
      ?disabled=${args.disabled}
      ?readonly=${args.readonly}
      ?required=${args.required}
      ?labelHidden=${args.labelHidden}
      .placeholder=${args.placeholder}
      .label=${args.label || ""}
      .hint=${args.hint || ""}
      .description=${args.description || ""}
      .error=${args.error || ""}
      .icon=${args.icon || ""}
      @change=${args.onchange}
      ?fullWidth=${args.fullWidth}
    >
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </m-select>
```

### States

```html
<m-stack direction="vertical" spacing="m">
      <m-select name="default" label="Default select">
        <option value="1">Default</option>
      </m-select>
      <m-select name="with-icon" label="With icon" icon="tree-structure">
        <option value="1">With icon</option>
      </m-select>
      <m-select name="disabled" label="Disabled select" disabled>
        <option value="1">Disabled</option>
      </m-select>
      <m-select
        name="readonly"
        label="Read only"
        readonly
        value="1"
      >
        <option value="1">Read only option</option>
        <option value="2">Another option</option>
      </m-select>
      <m-select name="required" label="Required select" required>
        <option value="1">Required</option>
      </m-select>
      <m-select name="error" label="Select with error" error="This field is required">
        <option value="1">Error</option>
      </m-select>
    </m-stack>
```

### Horizontal

```html
<m-select name="horizontal" label="Select label" horizontal>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </m-select>
```

### FullWidth

```html
<div style="width: 100%;">
      <m-select name="fullwidth" label="Select label" fullWidth>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </m-select>
    </div>
```

### WithLongContent

```html
<m-stack direction="vertical" spacing="m">
      <m-select
        name="long-content"
        label="This is a very long label that might wrap to multiple lines and should be handled gracefully by the component"
        description="This is a very long description text that provides additional context about the select component. It might contain important information that users need to know before making their selection. The text should wrap properly and maintain good readability."
        hint="This is a very long hint text that provides guidance to the user. It might contain important instructions or additional information about what kind of selection is expected. The text should be clearly visible but not overwhelming."
        error="This is a very long error message that explains what went wrong in detail. It should be clearly visible and help the user understand how to fix the issue. The text might wrap to multiple lines and should maintain good readability."
      >
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </m-select>
    </m-stack>
```

### WithLongContentHorizontal

```html
<m-stack direction="vertical" spacing="m">
      <m-select
        name="long-content-horizontal"
        label="This is a very long label that might wrap to multiple lines and should be handled gracefully by the component"
        description="This is a very long description text that provides additional context about the select component. It might contain important information that users need to know before making their selection. The text should wrap properly and maintain good readability."
        hint="This is a very long hint text that provides guidance to the user. It might contain important instructions or additional information about what kind of selection is expected. The text should be clearly visible but not overwhelming."
        error="This is a very long error message that explains what went wrong in detail. It should be clearly visible and help the user understand how to fix the issue. The text might wrap to multiple lines and should maintain good readability."
        horizontal
      >
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </m-select>
    </m-stack>
```

### DescriptionState

```html
<m-select name="description" label="Select label" description="Description message">
      <option value="1">Description</option>
    </m-select>
```

### HintState

```html
<m-select name="hint" label="Select label" hint="Hint message">
      <option value="1">Hint</option>
    </m-select>
```

## Usage

The Select component is commonly used in forms and settings where users must make a selection from a limited set of choices. Unlike text inputs, a select component restricts user input to predefined options, ensuring data consistency and reducing errors.

**Use Select when:**
- Users need to choose one option from a fixed set of choices.
- The number of options is manageable (e.g., 5–15 options).
- The choices do not require complex descriptions (if descriptions are necessary, consider a radio buttons).
- A consistent, compact UI is required, and a radio button group would take too much space.
- Users should not enter free text but instead select from a valid list.
- Users should be able to refine results or content (e.g., selecting a category).

**Do not use Select when:**
- The number of options is very small (2–4); use radio buttons instead.
- Users need to make multiple selections; use a checkboxes instead.
- Options require additional descriptions or explanations; use a group of radio buttons with descriptions.
- The selection should be immediately visible without clicking.

## Other Considerations

- Use clear and concise label.
- Use placeholder text like “Select a department” instead of a default selection unless a default is meaningful.
- Keep option labels short and scannable.
- Group related options for better readability (either alphabetically, by importance or by group).
- Provide clear error messages when a selection is required but not made.
- Preselect a default option when appropriate (e.g., "Select a department").
- Do not use vague labels like “Choose One” without context.
- Avoid long option lists that require excessive scrolling.

## Design Rationale

The Select component is designed to improve efficiency and clarity in forms while maintaining accessibility. A dropdown conserves space and simplifies decision-making for users, particularly when dealing with long lists.