Combo Box Disabled

PreviousNext

combo-box-disabled-demo

Docs
intentuipage

Preview

Loading preview…
components/docs/pickers/combo-box/combo-box-disabled-demo.tsx
"use client"

import { Avatar } from "@/components/ui/avatar"
import {
  ComboBox,
  ComboBoxContent,
  ComboBoxInput,
  ComboBoxItem,
  ComboBoxLabel,
} from "@/components/ui/combo-box"
import { Label } from "@/components/ui/field"

export default function ComboBoxDisabledDemo() {
  return (
    <ComboBox isDisabled>
      <Label>Users</Label>
      <ComboBoxInput placeholder="Select a user" />
      <ComboBoxContent items={users}>
        {(item) => (
          <ComboBoxItem key={item.id} id={item.id} textValue={item.name}>
            <Avatar src={item.image_url} />
            <ComboBoxLabel>{item.name}</ComboBoxLabel>
          </ComboBoxItem>
        )}
      </ComboBoxContent>
    </ComboBox>
  )
}

const users = [
  {
    id: 1,
    name: "Barbara Kirlin Sr.",
    image_url: "https://i.pravatar.cc/150?img=1",
  },
  //...
]

Installation

npx shadcn@latest add @intentui/combo-box-disabled-demo

Usage

Usage varies by registry entry. Refer to the registry docs or source files below for details.