Radio Props

State

group svelte

string

Bindable group value — the selected radio's `value` within the shared `name` (the Svelte analogue of a bound radio group).

Appearance

appearance

"button" "radio" "tab"

default radio

Visual appearance variant of the control.
background

"transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).
border

"none" "default" "bold" "muted" "accent"

Resting border for `appearance="button"`. Secondary and tertiary default to `"muted"` and promote to `"default"` when checked; primary defaults to `"default"`. Use `"none"` for a borderless look or `"bold"`/`"accent"` to intensify.
emphasis

"primary" "secondary" "tertiary"

default primary

Which surface ramp the panel paints with: `primary` is the filled tone accent (with contrast text), `secondary` the tone's own surface tint, `tertiary` the neutral ramp with tone-accent text. `background` then picks the step on that ramp.
orientation

"horizontal" "vertical"

default "horizontal"

Bar edge for `appearance="tab"` — `"horizontal"` puts the 2px indicator on the bottom edge (a tab strip), `"vertical"` on the inline-start edge (a side rail). Ignored by other appearances.
radius

"inherit" "none" "2xl" "lg" "md" "sm" "xl" "inner" "xs" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

Corner radius of the `appearance="button"` or `appearance="tab"` surface. Both default to the size-derived radius from the control sizing scale; pass `"inner"` to compute a concentric radius from a parent Panel's exported `--panel-out-radius`/`--panel-out-padding` (this is how `Choice` keeps its segmented items nested inside the group container). Tab bar-edge corners (bottom when horizontal, inline-start when vertical) always stay square so the accent bar sits seated on the track.
shape

NonNullable<RadioStyleProps["shape"]>

`appearance="button"` only: `"square"` makes an icon-only segment (a color swatch, a glyph) a square the row's height wide, its content centred. Ignored by other appearances.
size

"lg" "md" "sm"

default md

Size variant.
tone

"inherit" "cyan" "danger" "dynamic" "mauve" "neutral" "pink" "primary" "sage" "slate" "stone" "success" "teal" "violet" "warning"

default "primary"

Color scheme applied via `colorPalette`. For the `radio` and `tab` appearances this sets the indicator accent color; for `button` appearance it sets the Panel tone color.
translucent

boolean

Render the button surface with a translucent (semi-transparent) background.

Layout

fullWidth

boolean

Stretch the component to fill the available width.

Behavior

as

"div" "section" "article" "aside" "main" "header" "footer" "nav" "dialog" "form" "fieldset" "ul" "ol" "li" "a" "button" "label" "span" "kbd"

default "label"

Root element tag. Set `"span"` for a label-less indicator.
onchange svelte

(e: Event) => void

Native change handler forwarded to the input.

Slots

children slot svelte

Snippet

The radio's label content.
leading slot svelte

Snippet

Leading affix content (icon/addon before the label).
trailing slot svelte

Snippet

Trailing affix content (badge/addon after the label).

Advanced

element binding svelte

HTMLElement null

Bindable reference to the root label element.
passThrough

RadioPassThrough< RootElementAttributes, InputElementAttributes, TextElementAttributes >

Per-slot style and attribute override bag. Each slot accepts a `style` (Panda `SystemStyleObject` merged with base styles) and a `props` (HTML attributes spread onto the element).
reactive

boolean

default false

Astro / vanilla: serialize the props into `data-radio-config` so the client runtime hydrates this instance and `getPindoba(el, "radio")` can `update()` it. Frameworks with their own reactivity don't need it.