HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
RadioView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorOne choice in a radio group.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/radio'import'@fusion.dev/helix-headless/radio'Preview
API ReferenceRoothelix-radioOne choice in a radio group.
PropTypeDefaultDescriptiondefaultSelectedbooleanWhether the markup declared this one chosen, which is what a reset returns to.disabledbooleanfalseWhether this choice can be made.hideControlbooleanfalseTakes the circle away, leaving the card as the whole control.selectedbooleanfalseWhether this is the current choice.valuestring""Identifies this choice to the group, and is what the form submits.variant"chip"|"plain"|"card"How the choice presents itself.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming this choice.iconA mark shown beside them, or instead of them under `appearance="chip"`, where the words become the accessible name and the mark is what a reader picks between. Separate from the default slot because the chip has to hide one and show the other, and they are both in the same place otherwise.
EventTypeDescriptionhelix-selectHelixSelectEventFired when this choice is made. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus to this choice, for the group's arrow keys.select() => voidMakes this choice and announces it.
PartDescriptionboxThe circle.itemThe button, which is the whole row.labelThe words beside it.markThe dot inside it.
CSS PropertyDescription--radio-background-colorFill of an unselected circle.--radio-border-colorEdge of the circle, in every state.--radio-card-background-colorFill behind a card-shaped choice.--radio-card-border-colorEdge around one.--radio-card-paddingInset of the card appearance.--radio-chip-sizeDiameter of the chip appearance.--radio-mark-colorColor of the dot.--radio-sizeDiameter of the circle.
Grouphelix-radio-groupA set of choices where exactly one is the answer.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.namestring""Name submitted with the form.orientation"horizontal"|"vertical"Which way the choices run. A column reads one line per answer.requiredbooleanfalseWhether the form refuses to submit without it.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.itemsHelixHeadlessRadio[]The radios, in light-DOM order. Client only: the server has no tree.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The radios.hintRicher than a string.labelRicher than a string, where the question is more than one.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired when the answer changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionfeedbackWhat is wrong with it.hintHelp under the set.itemsThe choices, which is what `orientation` lays out.labelThe question, over the set.
CSS PropertyDescription--radio-group-gapSpace between the choices.
Roothelix-headless-radioOne choice in a radio group.
PropTypeDefaultDescriptiondefaultSelectedbooleanWhether the markup declared this one chosen, which is what a reset returns to.disabledbooleanfalseWhether this choice can be made.selectedbooleanfalseWhether this is the current choice.valuestring""Identifies this choice to the group, and is what the form submits.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming this choice.iconA mark shown beside them, or instead of them under `appearance="chip"`, where the words become the accessible name and the mark is what a reader picks between. Separate from the default slot because the chip has to hide one and show the other, and they are both in the same place otherwise.
EventTypeDescriptionhelix-selectHelixSelectEventFired when this choice is made. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus to this choice, for the group's arrow keys.select() => voidMakes this choice and announces it.
PartDescriptionboxThe circle.itemThe button, which is the whole row.labelThe words beside it.markThe dot inside it.
Grouphelix-headless-radio-groupA set of choices where exactly one is the answer.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.namestring""Name submitted with the form.orientation"horizontal"|"vertical"Which way the choices run. A column reads one line per answer.requiredbooleanfalseWhether the form refuses to submit without it.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.itemsHelixHeadlessRadio[]The radios, in light-DOM order. Client only: the server has no tree.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The radios.hintRicher than a string.labelRicher than a string, where the question is more than one.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired when the answer changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionfeedbackWhat is wrong with it.hintHelp under the set.itemsThe choices, which is what `orientation` lays out.labelThe question, over the set.
ExamplesNameDescriptionCardsRadios drawn as cards, for choices that need room to explain themselves.ChipsA satisfaction scale: five marks, five values, five names.DisabledA whole group disabled, and one option disabled inside a live group.EventsThe group answers for the set, and the member says it was the one pressed.HorizontalThe options in a row, which suits a short scale.InvalidThe group reporting that nothing was chosen.PreviewOne answer from several, with a hint under the question.PreviewOne answer from several, with a hint under the question.RequiredA question that has to be answered before the form will submit.Without The MarkThe dot hidden, so the whole chip is the target rather than the mark beside it.