export interface RadioOption { value: string; label: React.ReactNode; description?: string; } interface BasicRadioFieldProps { /** * The name of the form field/input, used to set/track the field value in the form state. */ name: string; /** * Required fields get additional markup/styling to indicate this validation requirement. */ isRequired?: boolean; /** * Readonly fields get marked as such in an accessible manner. */ isReadOnly?: boolean; /** * Additional description displayed close to the field - use this to document any * validation requirements that are crucial to successfully submit the form. More * information that is contextual/background typically belongs in a tooltip. */ description?: React.ReactNode; /** * Array of possible choices for the field. Only one can be selected. */ options: RadioOption[]; } type RadioFieldWithLabelProps = BasicRadioFieldProps & { /** * The (accessible) label for the field - anything that can be rendered. * * You must always provide a label to ensure the field is accessible to users of * assistive technologies. */ label: React.ReactNode; /** * Optional tooltip to provide additional information that is not crucial but may * assist users in filling out the field correctly. */ tooltip?: React.ReactNode; 'aria-describedby'?: never; }; type RadioFieldWithAriaLabelProps = BasicRadioFieldProps & { label?: never; tooltip?: never; /** * Aria-describedby attribute to provide additional information to accessibility tooling. * * Use aria-describedby for labelless radio fields. */ 'aria-describedby': string; }; export type RadioFieldProps = RadioFieldWithLabelProps | RadioFieldWithAriaLabelProps; /** * A radio field with a set of options. * * @reference https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-component-form-field-radio-group--docs */ declare const RadioField: React.FC; export default RadioField;