@nice-digital/nds-radio

Radio component for the NICE Design System

• @nice-digital/nds-radio - Installation - Usage - React - Props - SCSS - HTML

Installation

Install Node, and then:

npm i @nice-digital/nds-radio --save

Usage

React

Import the Radio component from the package and use within JSX:

import React from "react";
import { Radio } from "@nice-digital/nds-radio";

// The mimimum to be supplied for the input to render is a value

<Radio value="yes" />;

Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

Props

value

• Type: string (required)

The value for the single input.

<Radio label="yes" name="my-group" />

name

• Type: string

The name attribute on the single input, to put radio controls into single-choice groups.

<Radio label="yes" name="my-group" />

label

• Type: string

The label for the single input.

<Radio label="yes" name="my-group" label="Yes, please." />

hint

• Type: string

Any hint or help text that should be rendered underneath the radio and label

<Radio
	value="yes"
	name="my-group"
	label="Yes, please."
	hint="You can unsubscribe at any time"
/>

disabled

• Type: boolean

Prop to control whether the disabled attribute is present on the input.

<Radio label="yes" name="my-group" disabled={true} />

error

• Type: string | boolean

Prop to control whether an error class (and styling) is applied to the input, label and container. If true is supplied then the error styling is applied, if a string is supplied, the error styling is applied and an error message is rendered.

<Radio label="yes" name="my-group" error={true} />
<Radio label="yes" name="my-group" error="Please check the terms and conditions" />

inline

• Type: boolean

Prop to control whether the container recieves a class to set it inline. All radios in the group would need this prop.

<div>
	<Radio label="yes" name="my-group" inline={true} />
	<Radio label="no" name="my-group" inline={true} />
</div>

anything else

You can pass any other props to the component that will be added to the input tag

const otherProps = {
	"data-testing": true,
	"qa-selection": "radio button"
}
<Radio label="yes" name="my-group" {...otherProps}  />

SCSS

If you're not using React, then import the SCSS directly into your application by:

@forward '@nice-digital/nds-radio/scss/radio';

HTML

If you're not using React, then include the SCSS as above and use the HTML:

<div class="radio">
	<input class="radio__input" name="my-group" type="radio" id="my-group_yes" />
	<label class="radio__label" for="my-group_yes">
		Yes, please.
	</label>
</div>

Error example:

<p class="radio__error-message">Error message text here.</p>
<div class="radio radio--error">
	<input
		class="radio__input"
		type="radio"
		id="my-group_error"
		name="my-group"
	/>
	<label class="radio__label" for="my-group_error">
		Error!
	</label>
</div>