runway

Runway

Help

Discord

Dev Tools

runway

Runway

Select

A select component that can be used to choose from a predefined set of options.



The Select component is built using the native <select> element, and supports multiple label styles, various sizes, coloring, and more.



Usage

javascript
1import Select from "@/components/atoms/Select";
2import { useState } from "react";
3
4export default function Example() {
5    const [value, setValue] = useState("");
6
7    const handleChange = (e) => {
8        setValue(e.target.value);
9    };
10
11    return (
12        <div>
13            <Select
14                label="Pick something"
15                labelMode="above"
16                options={[
17                    { value: "red", label: "Red" },
18                    { value: "blue", label: "Blue" },
19                ]}
20                value={value}
21                onChange={handleChange}
22            />
23        </div>
24    );
25}



Props

The Select component accepts the following props:

NameTypeDefaultDescription
idstring""The id for the underlying <select> and corresponding <label>.
labelstring""The text for the label.
labelMode"none" | "inside" | "above" | "float""none"How to display the label: "none", "inside" "above", or "float".
labelBackgroundstringbg-bg-0 dark:bg-bg-900Background color used behind the floating label.
sizestring"md"Size of the component: "sm", "md", "lg".
borderRadiusstring"md"Tailwind border-radius classes (e.g. "md", "lg", "full").
colorstring"gray"Used for text and border color (e.g. "gray", "primary", "blue").
shadowstring""Tailwind shadow classes (e.g. "md" for shadow-md).
focusbooleantrueIf true, shows focus style (border and ring).
activeColorstring"primary"Color for the focus ring (e.g. "primary", "blue", etc.).
includeEmptyOptionbooleantrueIf true, includes an empty option at the top of the dropdown.
valuestring""Controlled value of the select.
onChangefunction-Callback fired when the value changes. Receives the event as an argument.
optionsArray[]An array of objects with shape { value, label } for the dropdown.
classNamestring""Additional Tailwind classes for the container.
textClassNamestring""Additional classes for the <select> itself (e.g. text color, font style, etc.).
...propsobject-Other valid attributes for a <select> (e.g. disabled, multiple, etc.).

The Select component is built using the native <select> element, so it supports all the same attributes.




Examples

Basic Usage

Use different label modes (above, float, inside, none), colors (color), and sizes (sm, md, lg) to customize the look and feel.