# 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.

Example: https://hextaui.com/docs/item/examples/selectable
Component docs: https://hextaui.com/docs/item.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/item-selectable.json
```

This adds `components/examples/item/selectable.tsx` with the Item component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/item/selectable.tsx"
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>
  )
}
```

## Props in this example

### Item

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |  |
| `size` | `"default" \| "sm" \| "xs"` | `"default"` |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Item examples

- [Grouped](https://hextaui.com/docs/item/examples/pressed.md)
- [Hover highlight](https://hextaui.com/docs/item/examples/image.md)
- [Variants](https://hextaui.com/docs/item/examples/variants.md)
- [Sizes](https://hextaui.com/docs/item/examples/sizes.md)
- [Avatar](https://hextaui.com/docs/item/examples/avatar.md)
- [People](https://hextaui.com/docs/item/examples/people.md)
- [Actions](https://hextaui.com/docs/item/examples/actions.md)
- [Header and footer](https://hextaui.com/docs/item/examples/header-footer.md)
- [Separator](https://hextaui.com/docs/item/examples/separator.md)
- [Long content](https://hextaui.com/docs/item/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/item/examples/rtl.md)