ESLint plugin
The essential plugin for use with the Atlassian Design System.no-html-radio
Don't use native HTML radios. The Atlassian Design System provides a ready-made radio component that includes event tracking, ensures accessible implementations, and provides access to ADS styling features like design tokens.
Use the Atlassian Design System Radio, (opens new window) and RadioGroup, (opens new window) components when suitable.
Examples
This rule marks code as violations when it finds native HTML radio elements.
Incorrect
<fieldset>
<legend>Preferred contact method</legend>
<input type="radio" id="contact-method--email" name="contact" value="email" />
^^^^^ Using a native radio input
<label for="contact-method--email">Email</label>
<input type="radio" id="contact-method--phone" name="contact" value="phone" />
^^^^^ Using a native radio input
<label for="contact-method--phone">Phone</label>
</fieldset>Correct
import { ErrorMessage, Field } from '@atlaskit/form';
import { RadioGroup } from '@atlaskit/radio';
import { type OptionsPropType } from '@atlaskit/radio/types';
const options: OptionsPropType = [
{ name: 'contact', value: 'email', label: 'Email' },
{ name: 'contact', value: 'phone', label: 'Phone' },
];
<Field label="Preferred contact method" name="contact" defaultValue="email">
{({ fieldProps }) => <RadioGroup {...fieldProps} options={options} />}
</Field>;