Select is a form component that lets users choose a value from a list of options.
Experiment with all the properties of the Select component in real time.
Text shown when no option is selected.
Text displayed above the field.
Text shown when the field is invalid.
Additional explanatory text displayed below the field.
Array of option objects available for selection.
Controls the color of the switch when active.
Defines the visual style, such as border or background emphasis.
Adjusts height and spacing.
Controls corner rounding.
Marks the field as invalid.
Indicates that a selection is required.
Prevents interaction and visually dims the field.
import { Select } from "lambda-ui-components";
const options = [
{ value: "react", label: "React" },
{ value: "next", label: "Next" },
{ value: "node", label: "Node" },
];
export default function App() {
return (
<Select options={options} />
);
}Prop | Default | Type |
|---|---|---|
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "medium" | "none" | "tiny" | "small" | "medium" | "large" | "full" |
variant | "outlined" | "outlined" | "soft" |
invalid | false | boolean |
disabled | false | boolean |
label | undefined | string |
helperText | undefined | string |
required | false | boolean |
onChange | undefined | (value: string) => void |
value | "" | string |
placeholder | "" | string |
options | undefined | IListCollection[] |
joinposition | undefined | "first" | "last" | "middle" |