Select

Select components act as <select> elements that use a custom dropdown menu UI. Currently, only single-select is supported. We're working on it.

Example Instance

<Select
  options={[
    { label: "Option 1", value: "opt1" },
    { label: "Option 2", value: "opt2" },
    { label: "Option 3", value: "opt3" },
  ]}
  value={selectedValue}
  onChange={handleChange}
  name={fontClass}
>
  <SelectTrigger>
    <Button label="Select"></Button>
  </SelectTrigger>
  <SelectMenu
    cardProps={{ scaleFactor: fontClass, material: "glass", materialProps: { thickness: "normal" } }}
  >
    <SelectOption value="opt1">Option 1</SelectOption>
    <SelectOption value="opt2">Option 2</SelectOption>
    <SelectOption value="opt3">Option 3</SelectOption>
  </SelectMenu>
</Select>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add select` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Select

Example Instance

Installation

Next.js

No-Code Tools

Props

Unique

Common