104Get started
HextaUI

Item: Selectable

Render an item as a <label> around a Checkbox and the whole row toggles it. A checked control, or aria-selected, aria-checked or aria-pressed on the item, marks the row selected.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from "@/components/ui/item"

const plans = [
  {
    id: "analytics",
    title: "Analytics",
    description: "Page views and funnels",
  },
  { id: "backups", title: "Daily backups", description: "Kept for 30 days" },
  { id: "sso", title: "Single sign-on", description: "SAML and OIDC" },
]

export function ItemSelectable() {
  return (
    <ItemGroup className="max-w-sm">
      {plans.map((plan, index) => (
        <Item key={plan.id} variant="outline" size="sm" render={<label />}>
          <Checkbox
            name="addons"
            value={plan.id}
            defaultChecked={index === 0}
          />
          <ItemContent>
            <ItemTitle>{plan.title}</ItemTitle>
            <ItemDescription>{plan.description}</ItemDescription>
          </ItemContent>
        </Item>
      ))}
    </ItemGroup>
  )
}

Add this example

This adds the example as components/examples/item/selectable.tsx, together with the Item component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/item-selectable.json

To add only the component, follow the Item installation.

Props in this example

The Item props this example sets, from the API reference.

Item

PropTypeDefault
variant
"default" | "outline" | "muted""default"
size
"default" | "sm" | "xs""default"
render
ReactElement | (props, state) => ReactElement<div>

Every prop is in the Item API reference.

More Item examples

See them all, with keyboard support and accessibility notes, on the Item page.

Related components