Select
The Select component in Electrik Slate UI is a form element used to create dropdown menus for selecting an option or multiple options from a list. It supports customization through props, integrates seamlessly with dark mode, and includes validation error messages.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
label |
String | null |
The label text displayed above the select dropdown. |
name |
String | '' |
The name attribute for the select input (required for form submissions). |
options |
Array | [] |
The options available in the select dropdown, passed as an associative array of value => display text. |
size |
String | md |
The size of the select element (sm, md, lg). |
placeholder |
String | null |
An optional placeholder displayed as the first option (disabled and unselectable). |
disabled |
Boolean | false |
Whether the select dropdown is disabled. |
required |
Boolean | false |
Whether the select dropdown is required. |
multiple |
Boolean | false |
Whether to allow multiple selections. |
error |
String | null |
Error message to be displayed below the select dropdown. |
Examples
Basic Select Usage
This example demonstrates a basic select dropdown with a label:
<!-- Basic Select Input -->
<x-slate::select
label="Choose an option"
name="example"
:options="['option1' => 'Option 1', 'option2' => 'Option 2', 'option3' => 'Option 3']"
/>Select with Placeholder
This example demonstrates a select dropdown with a placeholder:
<!-- Select Input with Placeholder -->
<x-slate::select
label="Choose an option"
name="example"
placeholder="Select an option"
:options="['option1' => 'Option 1', 'option2' => 'Option 2', 'option3' => 'Option 3']"
/>Disabled Select
This example demonstrates a select dropdown that is disabled:
<!-- Disabled Select Input -->
<x-slate::select
label="Choose an option"
name="example"
:options="['option1' => 'Option 1', 'option2' => 'Option 2']"
disabled
/>Multiple Select
This example demonstrates a select dropdown that allows multiple selections:
<!-- Multiple Select Input -->
<x-slate::select
label="Choose options"
name="example"
:options="['option1' => 'Option 1', 'option2' => 'Option 2', 'option3' => 'Option 3']"
multiple
/>Select with Error Message
This example demonstrates how to display an error message below the select dropdown:
This field is required.
<!-- Select Input with Error Message -->
<x-slate::select
label="Choose an option"
name="example"
:options="['option1' => 'Option 1', 'option2' => 'Option 2']"
error="This field is required."
/>Select in Dark Mode
This example demonstrates how the select dropdown adapts to dark mode:
<!-- Select Input in Dark Mode -->
<div class="dark">
<x-slate::select
label="Choose an option"
name="example"
:options="['option1' => 'Option 1', 'option2' => 'Option 2']"
/>
</div>Customization
The Select component is flexible and easy to customize. It supports various states such as disabled, required, multiple selection, and error handling. The Select component's dark mode support ensures that it maintains readability across different themes.
Stay in Touch
Be the first to know about the latest releases and features.