RadioGroup

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

export const BillingFrequency = () => {
  const labelId = useId();

  return (
    <fieldset>
      <legend id={labelId}>Billing frequency</legend>
      <RadioGroup
        name="billingFrequency"
        defaultValue="monthly"
        aria-labelledby={labelId}
      >
        <label>
          <Radio value="monthly" />
          Monthly
        </label>
        <label>
          <Radio value="yearly" />
          Yearly
        </label>
      </RadioGroup>
    </fieldset>
  );
};

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

export const DisplayDensity = () => {
  const [density, setDensity] = useState('comfortable');

  return (
    <RadioGroup
      value={density}
      onValueChange={setDensity}
      aria-label="Display density"
    >
      <label>
        <Radio value="compact" />
        Compact
      </label>
      <label>
        <Radio value="comfortable" />
        Comfortable
      </label>
    </RadioGroup>
  );
};