{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"list-box-web","type":"registry:item","title":"List Box","description":"A selectable list of options that supports keyboard navigation and single or multiple choice interactions.","files":[{"path":"snippets/web/list-box.tsx","content":"import { Avatar, AvatarFallback, AvatarImage, Description, Label, ListBox } from \"@heroui/react\";\n\nexport function ListBoxExample() {\n  return (\n    <ListBox aria-label=\"Users\" className=\"w-[220px]\" selectionMode=\"single\">\n      <ListBox.Item id=\"1\" textValue=\"Bob\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg\" />\n          <AvatarFallback>B</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col\">\n          <Label>Bob</Label>\n          <Description>bob@heroui.com</Description>\n        </div>\n        <ListBox.ItemIndicator />\n      </ListBox.Item>\n      <ListBox.Item id=\"2\" textValue=\"Fred\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg\" />\n          <AvatarFallback>F</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col\">\n          <Label>Fred</Label>\n          <Description>fred@heroui.com</Description>\n        </div>\n        <ListBox.ItemIndicator />\n      </ListBox.Item>\n      <ListBox.Item id=\"3\" textValue=\"Martha\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/purple.jpg\" />\n          <AvatarFallback>M</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col\">\n          <Label>Martha</Label>\n          <Description>martha@heroui.com</Description>\n        </div>\n        <ListBox.ItemIndicator />\n      </ListBox.Item>\n    </ListBox>\n  );\n}\n","type":"registry:file","target":"~/snippets/web/list-box.tsx"}],"author":"heroui","dependencies":["@heroui/react"]}