Radio Group

Ready

Groups radio buttons into a single choice with one tab stop and arrow-key navigation.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdRadioGroup } from '@fbin-web/neighborhood-core';

Usage

<nbhd-radio-group
  label="Finish"
  name="finish"
  value="chrome">
  <nbhd-radio
    label="Chrome"
    value="chrome"></nbhd-radio>
  <nbhd-radio
    label="Matte Black"
    value="matte-black"></nbhd-radio>
  <nbhd-radio
    label="Brushed Gold"
    value="brushed-gold"></nbhd-radio>
</nbhd-radio-group>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdRadioGroup } from '@fbin-web/neighborhood-react';

Usage

import { NbhdRadio, NbhdRadioGroup } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdRadioGroup
      label="Finish"
      name="finish"
      value="chrome">
      <NbhdRadio
        label="Chrome"
        value="chrome"></NbhdRadio>
      <NbhdRadio
        label="Matte Black"
        value="matte-black"></NbhdRadio>
      <NbhdRadio
        label="Brushed Gold"
        value="brushed-gold"></NbhdRadio>
    </NbhdRadioGroup>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	—	Visible label that names the group.
`name`	`name`	`string`	—	Name applied to every radio in the group. The form field name it submits under.
`value`	`value`	`string`	—	Value of the checked radio. Setting it checks the matching radio.
`ariaLabel`	`aria-label`	`string`	—	Accessible name for the group when there is no visible label.
`cssClass`	`css-class`	`string`	—	Additional CSS classes to apply to the group wrapper.
`helpText`	`help-text`	`string`	—	Help text to provide additional context.
`errorText`	`error-text`	`string`	—	Error message text to display when invalid. Defaults to "This field has an error." when empty.
`invalid`	`invalid`	`boolean`	`false`	Marks the group as invalid and shows the error text.
`required`	`required`	`boolean`	`false`	Marks the group as required and shows the required marker.
`disabled`	`disabled`	`boolean`	`false`	Disables every radio in the group; the group submits nothing.

Events

Name	Description	Event Detail
`change`	Fired when the checked radio changes. Change events from the radios inside the group stop at the group.	`{ value: string }`
`nbhd-change`	Same as change.	`{ value: string }`

Form methods

Form-associated: submits the checked radio’s value under the group’s `name`. With `required`, nothing chosen blocks submission.

Name	Description
`checkValidity()`	Returns false (and fires `invalid`) if the control fails validation.
`reportValidity()`	Like checkValidity(), and shows the browser’s validation message on the control.
`setCustomValidity(message)`	Marks the control invalid with your own message; an empty string clears it.
`validity`	The ValidityState (valueMissing, typeMismatch, customError, …).
`validationMessage`	The message the browser would show.
`willValidate`	Whether the control takes part in form validation (false when disabled).
`associatedForm`	The the control belongs to, or null.

Slots

Name	Description
`(default)`	The nbhd-radio options.
`label`	Custom content for the group label. Defaults to the label property value.
`help`	Help text content displayed below the options when not in an invalid state.
`error`	Error message content displayed below the options when in an invalid state.

CSS Parts

Name	Description
`base`	The group wrapper div.
`label`	The group label.
`label-slot`	The slot element inside the label.
`label-text`	The text element that displays the label property value.
`required`	The required marker (*) shown in the label when required. Hidden from assistive technology, which announces aria-required.
`options`	The radiogroup element that wraps the radios.
`text`	The wrapper div for help and error text.
`help`	The help slot element.
`error`	The error slot element.

nbhd-radio-group::part(base) {
  /* your styles */
}

Dependencies

Child components <nbhd-radio-group> renders internally. Import them too when you tree-shake.

RadioReady <nbhd-radio> TextReady <nbhd-text>