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

# Select

> Dropdown selection menu with validation support

# Select

The Select component allows users to choose one option from a dropdown list with support for form state management, actions, and validation feedback.

## Props

| Prop            | Type               | Default                 | Description                                       |
| --------------- | ------------------ | ----------------------- | ------------------------------------------------- |
| `options`       | `array \| string`  | **Required**            | Options array or comma-separated string           |
| `name`          | `string`           | -                       | Field name for form state management              |
| `label`         | `string`           | -                       | Select label                                      |
| `placeholder`   | `string`           | `"Select an option..."` | Placeholder text                                  |
| `value`         | `string`           | -                       | Controlled selected value                         |
| `defaultValue`  | `string`           | -                       | Initial selected value                            |
| `required`      | `boolean`          | `false`                 | Whether field is required                         |
| `disabled`      | `boolean`          | `false`                 | Disabled state                                    |
| `action`        | `object`           | -                       | Action to execute on selection change             |
| `messageFormat` | `string`           | -                       | Custom message format (use `{value}` placeholder) |
| `block`         | `boolean`          | `false`                 | Full width display                                |
| `error`         | `string`           | -                       | Error message to display                          |
| `helperText`    | `string`           | -                       | Helper text below select                          |
| `radius`        | `string \| number` | `12`                    | Border radius: `sm`, `md`, `lg`, `xl`, or number  |
| `size`          | `string`           | `"md"`                  | Size variant: `sm`, `md`, `lg`                    |

## Options Format

Options can be provided as an array of objects or a comma-separated string:

```jsx theme={null}
{/* Array format */}
<Select
  options={[
    { label: "Option 1", value: "opt1" },
    { label: "Option 2", value: "opt2", description: "With description" }
  ]}
/>

{/* String format */}
<Select options="Option 1, Option 2, Option 3" />
```

## Examples

### Basic Select

```jsx theme={null}
<Select
  label="Country"
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
    { label: "Mexico", value: "mx" }
  ]}
/>
```

### Simple String Options

```jsx theme={null}
<Select
  label="Priority"
  options="Low, Medium, High, Critical"
/>
```

### With Default Value

```jsx theme={null}
<Select
  label="Language"
  options={[
    { label: "English", value: "en" },
    { label: "Spanish", value: "es" },
    { label: "French", value: "fr" }
  ]}
  defaultValue="en"
/>
```

### With Descriptions

```jsx theme={null}
<Select
  label="Plan"
  options={[
    { label: "Free", value: "free", description: "Basic features, up to 3 projects" },
    { label: "Pro", value: "pro", description: "$19/month, unlimited projects" },
    { label: "Enterprise", value: "enterprise", description: "Custom pricing, dedicated support" }
  ]}
/>
```

### Required Field

```jsx theme={null}
<Select
  label="Category"
  options="Technology, Business, Design, Marketing"
  required
/>
```

### With Error State

```jsx theme={null}
<Select
  label="Department"
  options="Engineering, Sales, Marketing, Support"
  error="Please select a department"
/>
```

### With Helper Text

```jsx theme={null}
<Select
  label="Timezone"
  options={timezones}
  helperText="Select your local timezone"
/>
```

### Sizes

```jsx theme={null}
<Col gap="md">
  <Select label="Small" size="sm" options="A, B, C" />
  <Select label="Medium" size="md" options="A, B, C" />
  <Select label="Large" size="lg" options="A, B, C" />
</Col>
```

### With Action on Change

```jsx theme={null}
<Select
  label="Theme"
  options={[
    { label: "Light", value: "light" },
    { label: "Dark", value: "dark" },
    { label: "System", value: "system" }
  ]}
  action={{
    type: "lyzn.showToast",
    payload: { message: "Theme changed to {{value}}" }
  }}
/>
```

### Form State Management

When used with `name` prop, select updates form state:

```jsx theme={null}
<Card>
  <Col gap="md">
    <Select
      name="category"
      label="Category"
      options="Technology, Design, Business"
    />
    <Select
      name="priority"
      label="Priority"
      options="Low, Medium, High"
    />
    <Button
      label="Submit"
      action={{ type: "lyzn.sendMessage" }}
    />
  </Col>
</Card>
```

## Common Patterns

### Filter Controls

```jsx theme={null}
<Row gap="md">
  <Select
    name="status"
    placeholder="Status"
    options="All, Active, Pending, Completed"
  />
  <Select
    name="sortBy"
    placeholder="Sort by"
    options="Newest, Oldest, Name, Price"
  />
</Row>
```

### Settings Form

```jsx theme={null}
<Card>
  <Col gap="md">
    <Title value="Preferences" />
    <Select
      name="language"
      label="Language"
      options={[
        { label: "English", value: "en" },
        { label: "Spanish", value: "es" },
        { label: "French", value: "fr" }
      ]}
      defaultValue="en"
    />
    <Select
      name="notifications"
      label="Email Notifications"
      options={[
        { label: "All notifications", value: "all" },
        { label: "Important only", value: "important" },
        { label: "None", value: "none" }
      ]}
      defaultValue="important"
    />
    <Button
      label="Save Preferences"
      action={{ type: "lyzn.sendMessage" }}
    />
  </Col>
</Card>
```

### Dependent Selects

```jsx theme={null}
<Col gap="md">
  <Select
    name="country"
    label="Country"
    options={countries}
    action={{
      type: "lyzn.fetch",
      payload: { url: "/api/states?country={{value}}" }
    }}
  />
  <Select
    name="state"
    label="State/Province"
    options={states}
    disabled={!selectedCountry}
  />
</Col>
```

### Quick Selection

```jsx theme={null}
<Select
  placeholder="Quick actions..."
  options={[
    { label: "New Project", value: "new_project" },
    { label: "Import Data", value: "import" },
    { label: "Export Report", value: "export" }
  ]}
  action={{
    type: "lyzn.sendMessage",
    payload: { message: "Action: {{value}}" }
  }}
/>
```