Radio

import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const ContactMethod = () => (
  <RadioGroup
    name="contactMethod"
    defaultValue="email"
    aria-label="Preferred contact method"
  >
    <Radio value="email">Email</Radio>
    <Radio value="phone">Phone</Radio>
    <Radio value="post" disabled>
      Postal mail (unavailable)
    </Radio>
  </RadioGroup>
);

import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const StorageChoice = () => (
  <RadioGroup aria-label="Storage" defaultValue="ssd">
    <Radio.Root value="ssd">
      <Radio.Indicator keepMounted render={<span />}>
        ✓
      </Radio.Indicator>
      SSD
    </Radio.Root>
    <Radio.Root value="hdd">HDD</Radio.Root>
  </RadioGroup>
);

import { IconLayoutKanban, IconTable } from 'twenty-ui/icon';
import { Radio, RadioGroup } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

const VIEWS = [
  {
    value: 'table',
    title: 'Table view',
    description: 'Browse records in rows.',
    Icon: IconTable,
  },
  {
    value: 'board',
    title: 'Board view',
    description: 'Track progress across columns.',
    Icon: IconLayoutKanban,
  },
];

export const ViewChoice = () => (
  <RadioGroup
    aria-label="Default view"
    defaultValue="table"
    style={{ width: 280 }}
  >
    {VIEWS.map(({ value, title, description, Icon }) => (
      <Radio key={value} variant="card" value={value}>
        <span style={{ display: 'grid', gap: 8, paddingInlineEnd: 24 }}>
          <Icon size={20} aria-hidden />
          <Text
            render={<span />}
            style={{ fontWeight: 'var(--t-font-weight-medium)' }}
          >
            {title}
          </Text>
          <Text
            render={<span />}
            style={{ color: 'var(--t-font-color-secondary)', lineHeight: 1.5 }}
          >
            {description}
          </Text>
        </span>
      </Radio>
    ))}
  </RadioGroup>
);

import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const BillingChoice = () => (
  <RadioGroup aria-label="Billing interval" defaultValue="monthly">
    <Radio
      variant="card"
      value="monthly"
      nativeButton
      render={<button type="button" />}
    >
      Monthly
    </Radio>
    <Radio
      variant="card"
      value="yearly"
      nativeButton
      render={<button type="button" />}
    >
      Yearly
    </Radio>
  </RadioGroup>
);