Radio

RC 1Kb +0.8 multi

import 'pyro/radio'
import 'pyro/radio-group'

Preview Code Stackblitz

Usage

<pyro-radio-group name="numenor" style="gap: 1em;">
  <pyro-radio value="uno"></pyro-radio>
  <pyro-radio value="due" checked></pyro-radio>
  <pyro-radio value="tre"></pyro-radio>
</pyro-radio-group>

Variations

Props

interface RadioProps {
  /** Initial checked value */
  checked?: boolean;
  /** Boolean value of radio */
  value: string;
  /** Makes rectangular, button-like radio */
  square?: boolean;
  onInput?: (e: TargetValueEvent) => void;
  children?: any;
}
interface RadioGroupProps {
  /** Name of group, assigned to all child `pyro-radio`s */
  name: string;
  /** If provided, sets radio with same value as checked by default */
  value?: string;
  onInput?: (e: TargetValueEvent) => void;
  /** Slot for radios */
  children?: any;
}

Slots

/**
 * Radio group
 * @slot - Every child needs to be a <pyro-radio> or HtmlElement containing a <pyro-radio>
 * Radio
 * @slot - With square prop only, shows content inside squared radio
 */

CSS prop theming

The

Full theming sheet

/**
 * TODO
 */