# OptionCard

> Molecule — orn-ui

> ⚠️ Requires <UIProvider>: This component (like every orn-ui component) must render inside a <UIProvider> ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild.

## Installation

Install just this component (copies the source into your project, no npm dependency)
```bash
npx orn-ui add option-card
```

Or install the whole package and import it
```tsx
pnpm add orn-ui
import { OptionCard } from 'orn-ui/option-card';
```

Depends on: core (theme + icons), pressable-scale

## Variants

### layout="horizontal"

```tsx
<View style={{ flexDirection: 'row', gap: 8 }}>
  <OptionCard label="Cash" iconName="check" isSelected={selected === 'cash'} onPress={() => setSelected('cash')} />
  <OptionCard label="Card" iconName="info" isSelected={selected === 'card'} onPress={() => setSelected('card')} />
</View>
```

### layout="vertical"

```tsx
<View style={{ flexDirection: 'row', gap: 8 }}>
  <OptionCard
    label="Cash"
    iconName="check"
    layout="vertical"
    isSelected={selectedVertical === 'cash'}
    onPress={() => setSelectedVertical('cash')}
  />
  <OptionCard
    label="Card"
    iconName="info"
    layout="vertical"
    isSelected={selectedVertical === 'card'}
    onPress={() => setSelectedVertical('card')}
  />
  <OptionCard
    label="Transfer"
    iconName="search"
    layout="vertical"
    isSelected={selectedVertical === 'transfer'}
    onPress={() => setSelectedVertical('transfer')}
  />
</View>
```

## Full demo source

```tsx
const variants: VariantDef[] = [
  {
    label: 'layout="horizontal"',
    content: (
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <OptionCard label="Cash" iconName="check" isSelected={selected === 'cash'} onPress={() => setSelected('cash')} />
        <OptionCard label="Card" iconName="info" isSelected={selected === 'card'} onPress={() => setSelected('card')} />
      </View>
    ),
  },
  {
    label: 'layout="vertical"',
    content: (
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <OptionCard
          label="Cash"
          iconName="check"
          layout="vertical"
          isSelected={selectedVertical === 'cash'}
          onPress={() => setSelectedVertical('cash')}
        />
        <OptionCard
          label="Card"
          iconName="info"
          layout="vertical"
          isSelected={selectedVertical === 'card'}
          onPress={() => setSelectedVertical('card')}
        />
        <OptionCard
          label="Transfer"
          iconName="search"
          layout="vertical"
          isSelected={selectedVertical === 'transfer'}
          onPress={() => setSelectedVertical('transfer')}
        />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | — | — |
| `description?` | `string` | — | Secondary line: the detail that decides the choice ("arrives in 3 days"). |
| `iconName?` | `IconName` | — | — |
| `isSelected` | `boolean` | — | — |
| `onPress` | `() => void` | — | — |
| `disabled?` | `boolean` | false | — |
| `layout?` | `'vertical' \| 'horizontal'` | horizontal | 'vertical': icon on top, text centered below. 'horizontal': icon and text in a row. |
| `style?` | `StyleProp<ViewStyle>` | — | — |