Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

The RadioButton component provides a circular single-selection control used within mutually exclusive option groups. Nettalco Theme mirrors the Checkbox token structure — defining circle dimensions, background and border colors for each interactive state, focus ring tokens, and a dedicated icon section for the inner selection dot.

Usage

<!-- Radio group -->
<div class="flex flex-col gap-2">
  <p-radioButton
    [(ngModel)]="selectedCity"
    name="city"
    value="NYC"
    label="New York"
  />
  <p-radioButton
    [(ngModel)]="selectedCity"
    name="city"
    value="LA"
    label="Los Angeles"
  />
  <p-radioButton
    [(ngModel)]="selectedCity"
    name="city"
    value="CHI"
    label="Chicago"
  />
</div>

<!-- Size variants -->
<p-radioButton [(ngModel)]="val" value="a" size="small" label="Small" />
<p-radioButton [(ngModel)]="val" value="b" size="large" label="Large" />
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RadioButtonModule } from 'primeng/radiobutton';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [RadioButtonModule, FormsModule],
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  selectedCity = '';
  val = '';
}

Design Tokens

Root (circle)

TokenValueDescription
width1.25remDefault circle width
height1.25remDefault circle height
background{form.field.background}Unselected background
checkedBackground{primary.color}Background when selected
checkedHoverBackground{primary.hover.color}Background when selected + hovered
disabledBackground{form.field.disabled.background}Background when disabled
filledBackground{form.field.filled.background}Background in filled variant mode
borderColor{form.field.border.color}Default border color
hoverBorderColor{form.field.hover.border.color}Border on hover (unselected)
focusBorderColor{form.field.border.color}Border on focus (unselected)
checkedBorderColor{primary.color}Border when selected
checkedHoverBorderColor{primary.hover.color}Border when selected + hovered
checkedFocusBorderColor{primary.color}Border when selected + focused
checkedDisabledBorderColor{form.field.border.color}Border when selected + disabled
invalidBorderColor{form.field.invalid.border.color}Border in invalid state
shadow{form.field.shadow}Box shadow
focusRing.width{focus.ring.width}Focus ring width
focusRing.style{focus.ring.style}Focus ring style
focusRing.color{focus.ring.color}Focus ring color
focusRing.offset{focus.ring.offset}Focus ring offset
focusRing.shadow{focus.ring.shadow}Focus ring shadow
transitionDuration{form.field.transition.duration}Transition duration
sm.width1remCircle width in sm variant
sm.height1remCircle height in sm variant
lg.width1.5remCircle width in lg variant
lg.height1.5remCircle height in lg variant

Icon (selection dot)

TokenValueDescription
icon.size0.75remDefault inner dot size
icon.checkedColor{primary.contrast.color}Dot color when selected
icon.checkedHoverColor{primary.contrast.color}Dot color when selected + hovered
icon.disabledColor{form.field.disabled.color}Dot color when disabled
icon.sm.size0.5remDot size in sm variant
icon.lg.size1remDot size in lg variant

Theme Notes

RadioButton and Checkbox share identical token structures for their box/circle root styles. Both use {primary.color} for the checked state and {primary.contrast.color} for the inner indicator, creating visual consistency between the two selection control types.
The inner dot is intentionally smaller than the Checkbox icon (0.75rem vs 0.875rem). This matches the conventional radio button appearance where the dot occupies roughly 60 % of the circle diameter, leaving a visible ring around it.

Build docs developers (and LLMs) love