kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
40 wiersze
961 B
TypeScript
40 wiersze
961 B
TypeScript
import React, { useMemo } from 'react';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
import HStack from '../hstack/hstack';
|
|
|
|
interface IRadioButton {
|
|
value: string
|
|
checked?: boolean
|
|
name: string
|
|
onChange: React.ChangeEventHandler<HTMLInputElement>
|
|
label: React.ReactNode
|
|
}
|
|
|
|
/**
|
|
* A group for radio input with label.
|
|
*/
|
|
const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, label }) => {
|
|
const formFieldId: string = useMemo(() => `radio-${uuidv4()}`, []);
|
|
|
|
return (
|
|
<HStack alignItems='center' space={3}>
|
|
<input
|
|
type='radio'
|
|
name={name}
|
|
id={formFieldId}
|
|
value={value}
|
|
checked={checked}
|
|
onChange={onChange}
|
|
className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
|
|
/>
|
|
|
|
<label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
|
|
{label}
|
|
</label>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default RadioButton;
|