> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CardPicker

> A radio option presented as a card.

Place `CardPicker` inside [RadioGroup](/ui/primitives/input/radio-group). The group owns selection; each card supplies a value and its visible content. It uses Radio's keyboard, form, and disabled behavior.

```tsx theme={null}
import { CardPicker } from 'twenty-ui/components';
import { RadioGroup } from 'twenty-ui/primitives/input';

export const ViewChoice = () => (
  <RadioGroup aria-label="Default view" defaultValue="table">
    <CardPicker value="table">Table view</CardPicker>
    <CardPicker value="board">Board view</CardPicker>
  </RadioGroup>
);
```

Use `value` and `onValueChange` on the group for controlled selection, or `defaultValue` for an initial choice. The default card renders a div with radio semantics. Avoid nesting interactive controls in its content.

## Props

<ParamField body="children" type="ReactNode">
  Card content inside the radio control.
</ParamField>

<ParamField body="className" type="string | ((state: RadioRootState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="disabled" type="boolean">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="inputRef" type="Ref<HTMLInputElement>">
  A ref to access the hidden input element.
</ParamField>

<ParamField body="nativeButton" type="boolean" default="false">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `true` if the rendered element is a native button.
</ParamField>

<ParamField body="readOnly" type="boolean">
  Whether the user should be unable to select the radio button.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioRootState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="required" type="boolean">
  Whether the user must choose a value before submitting a form.
</ParamField>

<ParamField body="size" type="&#x22;md&#x22; | &#x22;sm&#x22;">
  Visual size of the radio.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: RadioRootState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="value" type="TValue" required>
  The unique identifying value of the radio in a group.
</ParamField>