Skip to main content

​
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

PropTypeDefaultDescription
optionsarray | stringRequiredOptions array or comma-separated string
namestring-Field name for form state management
labelstring-Select label
placeholderstring"Select an option..."Placeholder text
valuestring-Controlled selected value
defaultValuestring-Initial selected value
requiredbooleanfalseWhether field is required
disabledbooleanfalseDisabled state
actionobject-Action to execute on selection change
messageFormatstring-Custom message format (use {value} placeholder)
blockbooleanfalseFull width display
errorstring-Error message to display
helperTextstring-Helper text below select
radiusstring | number12Border radius: sm, md, lg, xl, or number
sizestring"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 with name 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}}" }
  }}
/>