18Switch language to English

Labeled Select

السابقالتالي

A select dropdown with an associated label.

import { LabeledSelect } from "@/components/atom/labeled-select"

export default function LabeledSelectDemo() {
  return (
    <>
      <LabeledSelect
        label="Category"
        options={[
          { value: "billing", label: "Billing" },
          { value: "support", label: "Support" },
          { value: "account", label: "Account" },
        ]}
        defaultValue="billing"
      />
    </>
  )
}

Installation

pnpm dlx shadcn@latest add @codebase/labeled-select

Usage

import { LabeledSelect } from "@/components/atom/labeled-select"
<LabeledSelect
  label="Category"
  options={[
    { value: "billing", label: "Billing" },
    { value: "support", label: "Support" },
  ]}
  defaultValue="billing"
/>