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}
    >
      <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
Item
Trigger Value
Content
Trigger
Item Text
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

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.