> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Select

> Dropdown select with string or object options

# Select

`Select` renders a dropdown control and sends a payload with `value` to Lua when the user chooses an option.

```lua theme={"dark"}
local tone, setTone = track.state('tone', 'success')

lui.page('filters', function(ui)
  ui.select({
    value = tone,
    options = {
      { label = 'Success', value = 'success' },
      { label = 'Warning', value = 'warning' },
      { label = 'Error', value = 'error' }
    },
    onChange = function(payload)
      setTone(payload.value)
    end
  })
end)
```

## API

<CodeGroup>
  ```lua Builder theme={"dark"}
  ui.select(props)
  ```

  ```lua Declarative theme={"dark"}
  lui.select(props)
  ```
</CodeGroup>

## Props

| Prop                                                                 | Type                                             | Description                                                                           |
| -------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------- |
| `value`                                                              | `string \| reactive getter`                      | Selected value.                                                                       |
| `options`                                                            | `string[] \| object option[] \| reactive getter` | Options. Object options use `label` and `value`. Strings become both label and value. |
| `onChange`                                                           | `function(payload)`                              | Receives a payload with `value = string`.                                             |
| `icon`, `iconComponent`                                              | icon                                             | Default open/closed icon.                                                             |
| `closedIcon`, `closedIconComponent`                                  | icon                                             | Icon while closed.                                                                    |
| `openIcon`, `openIconComponent`, `activeIcon`, `activeIconComponent` | icon                                             | Icon while open.                                                                      |
| `triggerClassName`                                                   | `string`                                         | Trigger button class.                                                                 |
| `valueClassName`, `labelClassName`                                   | `string`                                         | Selected value text class.                                                            |
| `menuClassName`, `contentClassName`                                  | `string`                                         | Dropdown menu class.                                                                  |
| `optionClassName`                                                    | `string`                                         | Every option row class.                                                               |
| `optionActiveClassName`, `optionSelectedClassName`                   | `string`                                         | Active option row classes.                                                            |
| `optionLabelClassName`, `optionActiveLabelClassName`                 | `string`                                         | Option label classes.                                                                 |

<Tip>
  `Select` keeps a local selected value for immediate UI feedback, then syncs back to reactive Lua state through `onChange`.
</Tip>