SelectItem() — ui Function Reference

Architecture documentation for the SelectItem() function in select.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SelectItem() — ui Function Reference

Dependency Diagram

graph TD
  743a40ff_1afc_94bc_9585_d08e12074427["SelectItem()"]
  8ec2ba55_c5b8_dd05_8c62_e29326f13c29["select.tsx"]
  743a40ff_1afc_94bc_9585_d08e12074427 -->|defined in| 8ec2ba55_c5b8_dd05_8c62_e29326f13c29
  style 743a40ff_1afc_94bc_9585_d08e12074427 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/ui/select.tsx lines 121–152

function SelectItem({
  className,
  children,
  ...props
}: SelectPrimitive.Item.Props) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "cn-select-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        className
      )}
      {...props}
    >
      <SelectPrimitive.ItemText className="cn-select-item-text shrink-0 whitespace-nowrap">
        {children}
      </SelectPrimitive.ItemText>
      <SelectPrimitive.ItemIndicator
        render={<span className="cn-select-item-indicator" />}
      >
        <IconPlaceholder
          lucide="CheckIcon"
          tabler="IconCheck"
          hugeicons="Tick02Icon"
          phosphor="CheckIcon"
          remixicon="RiCheckLine"
          className="cn-select-item-indicator-icon pointer-events-none"
        />
      </SelectPrimitive.ItemIndicator>
    </SelectPrimitive.Item>
  )
}