Radio
ready
A radio button component that allows users to select one option from a group of mutually exclusive choices.
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. | |
dark
|
dark
|
boolean
|
false
|
Applies dark theme styling 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. Defaults to the label property value. |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
label
|
The label element for the radio button. |
label-slot
|
The slot element inside the label. |
label-text
|
The text element that displays the label content. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-radioLabel-color
|
var(--nbhd-color-black) |
--nbhd-radioLabel-fontSize
|
var(--nbhd-fontSize-regular) |
--nbhd-radioLabel-fontFamily
|
var(--nbhd-fontFamily, inherit) |
--nbhd-radioLabel-fontWeight
|
var(--nbhd-fontWeight-400, 400) |
--nbhd-radioLabel-paddingInline
|
var(--nbhd-space-9, 36px) var(--nbhd-space-0, 0) |
--nbhd-radio-borderColor
|
var(--nbhd-color-gray) |
--nbhd-radio-backgroundColor
|
transparent |
--nbhd-radioLabel-color-dark
|
var(--nbhd-color-white) |
--nbhd-radio-borderColor-dark
|
var(--nbhd-color-white) |
--nbhd-radio-borderColor-selected
|
var(--nbhd-color-black) |
--nbhd-radio-backgroundColor-selected
|
var(--nbhd-color-black) |
--nbhd-radio-borderColor-selected-dark
|
var(--nbhd-color-white) |
--nbhd-radio-backgroundColor-selected-dark
|
var(--nbhd-color-white) |
Dependencies
This component contains the following components as dependencies.