Select

A dropdown menu that allows the user to select an option.
Properties
disabled
error
variant
label
placeholder
helpText
icon
Example
Source Code
Installation
"use client";

import React from "react";
import { Select } from "@/subframe/components/Select";

function SelectExample() {
  return (
    <Select
      disabled={false}
      error={false}
      variant="outline"
      label=""
      placeholder="Select"
      helpText=""
      icon={null}
      value={undefined}
      onValueChange={(value: string) => {}}
    >
      <Select.Item value="Item 1">Item 1</Select.Item>
      <Select.Item value="Item 2">Item 2</Select.Item>
      <Select.Item value="Item 3">Item 3</Select.Item>
    </Select>
  );
}

export default SelectExample;

Props

Select
Content
Item
Item Text
Trigger
Trigger Value
Prop
Type
Default
Additional info
disabled
boolean
false
error
boolean
false
variant
"outline" | "filled"
"outline"
label
string
""
placeholder
string
"Select"
helpText
string
""
icon
IconName
null
children
React.ReactNode
value
string
Currently selected value.
onValueChange
(value: string) => void
Handler called when a different option is selected.

Examples

Controlled

Use value and onValueChange props to control the selected text.

Label, placeholder, help text

Use label, placeholder, and helpText props for additional information.

Error

Use error and helpText props for validating the entire group.

Custom display values

Use children prop to show a different label than the value.