RadioGroup

import { RadioGroup } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const options = [{"label":"Option A","value":"0"},{"label":"Option B","value":"1"},{"label":"Option C","value":"2"}]

  return () => (
    <>
      <RadioGroup label="Options" hideLabel defaultValue="0" options={options} />
    </>
  )
}

import { RadioGroup } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const options = ['Apple', 'Banana', 'Cherry', 'Mango'].map((label) => ({ value: label.toLowerCase(), label }))

  return () => (
    <>
      <RadioGroup label="Plan" options={[
        { value: 'free', label: 'Free', description: 'For personal projects' },
        { value: 'pro', label: 'Pro', description: 'For growing teams' },
      ]} defaultValue="free" />
    </>
  )
}

import { RadioGroup } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const options = ['Apple', 'Banana', 'Cherry', 'Mango'].map((label) => ({ value: label.toLowerCase(), label }))

  return () => (
    <>
      <RadioGroup label="Size" orientation="horizontal" options={options} />
    </>
  )
}