Radio
ready

A radio button component that allows users to select one option from a group of mutually exclusive choices.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdRadio } from '@fbin-web/neighborhood-core';
<nbhd-radio label="Radio Label" title="Radio Title" value="yes" name="radio-1" id="radio-1">
</nbhd-radio>

React 

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

const App = () => (
  <>
    <NbhdRadio
      label="Radio Label"
      title="Radio Title"
      value="yes"
      name="radio-1"
      id="radio-1"></NbhdRadio>
  </>
);

Properties

Property Attribute Type Default Description
form form string The form the radio button is associated with.
id id string The id of the radio button.
label label string The label text for the radio button.
value value string The value of the radio button.
title title string The title of the radio button.
name name string The name of the radio button.
ariaLabel aria-label string Descriptive text for additional context.
cssClass css-class string Additional CSS classes to apply to the radio button.
disabled disabled boolean false Disables the radio button from being selected.
checked checked boolean false Whether the radio button is checked initially.
required required boolean false Whether the radio button is required.

Slots

Name Description
label Custom content for the radio button label. When omitted, the label property value is rendered.

CSS Parts

Name Description
base The wrapper div for the radio form control.
label The label element for the radio button.
label-slot The named label slot inside the radio label.
label-text The fallback text element that displays the label property value.

Dependencies

This component contains the following components as dependencies.