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:{/* 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
<Select
label="Country"
options={[
{ label: "United States", value: "us" },
{ label: "Canada", value: "ca" },
{ label: "Mexico", value: "mx" }
]}
/>
Simple String Options
<Select
label="Priority"
options="Low, Medium, High, Critical"
/>
With Default Value
<Select
label="Language"
options={[
{ label: "English", value: "en" },
{ label: "Spanish", value: "es" },
{ label: "French", value: "fr" }
]}
defaultValue="en"
/>
With Descriptions
<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
<Select
label="Category"
options="Technology, Business, Design, Marketing"
required
/>
With Error State
<Select
label="Department"
options="Engineering, Sales, Marketing, Support"
error="Please select a department"
/>
With Helper Text
<Select
label="Timezone"
options={timezones}
helperText="Select your local timezone"
/>
Sizes
<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
<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 withname prop, select updates form state:
<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
<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
<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
<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
<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}}" }
}}
/>