Selectable

A component that displays a selectable option with an icon, title, and optional description.

Import

import Selectable from '@/components/forms/Selectable';

Props

Prop	Type	Default	Description
`title`	`string`	Required	The title text of the selectable option
`description`	`string`	—	Optional description text
`icon`	`IconName`	Required	Icon to display with the option
`iconColor`	`string`	—	Custom color for the icon
`selected`	`boolean`	`false`	Whether the option is selected
`onPress`	`() => void`	—	Function called when option is pressed
`error`	`string`	—	Error message to display
`className`	`string`	—	Additional classes for the option
`containerClassName`	`string`	—	Additional classes for the container

Basic Usage

<Selectable
  title="Credit Card"
  icon="CreditCard"
  selected={selectedPayment === 'credit'}
  onPress={() => setSelectedPayment('credit')}
/>

With Description

<Selectable
  title="Apple Pay"
  description="Fast checkout with Apple Pay"
  icon="Apple"
  selected={selectedPayment === 'apple'}
  onPress={() => setSelectedPayment('apple')}
/>

Custom Icon Color

<Selectable
  title="PayPal"
  icon="DollarSign"
  iconColor="#0070ba"
  selected={selectedPayment === 'paypal'}
  onPress={() => setSelectedPayment('paypal')}
/>

Selectable

Selectable

Import

Props

Basic Usage

With Description

Custom Icon Color

On this page