Radio Component

Radio

This component provides Radio functionality.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { Radio } from './Radio';

const props = {};

<Radio prop1="value1" prop2="value2" />;

import type { InputHTMLAttributes, ReactNode } from 'react';
import { forwardRef, useId } from 'react';

import cn from '../cn';

interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
  heading: ReactNode;
  description?: ReactNode;
  className?: string;
}

export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio({
  heading,
  description,
  className = '',
  ...rest
}) {
  const id = useId();

  return (
    <div className={cn('flex items-center space-x-3', className)}>
      <input
        id={id}
        type="radio"
        className="text-brand dark:text-brand h-4 w-4 border focus:ring-0 focus:ring-offset-0"
        {...rest}
      />
      <label htmlFor={id}>
        <div>{heading}</div>
        {description ? <div className="text-sm">{description}</div> : null}
      </label>
    </div>
  );
});