HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SwitchView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA control that turns something on or off.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/switch'import'@fusion.dev/helix-headless/switch'Preview
API ReferenceRoothelix-switchA control that turns something on or off.
PropTypeDefaultDescriptioncheckedbooleanWhether the control is checked.defaultCheckedbooleanfalseInitial checked state for uncontrolled use, where nothing declared one.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.requiredbooleanfalseWhether the form refuses to submit without it.valuestring"on"Value submitted when the switch is on.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming what this turns on.
EventTypeDescriptionchangeEventRelayed from the input once the state has changed.helix-before-toggleHelixBeforeToggleEventFired before the state changes, and cancelable.inputEventAnnounced once the state has moved.
MethodTypeDescriptionrequestChecked(next: boolean) => booleanRequests a checked change, and reports whether it was applied.resetChecked() => voidDrops the recorded state, so the control reads `defaultChecked` again.toggleChecked() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe input.feedbackWhat is wrong with it.fieldThe row: the track and its label.hintHelp under the control, while nothing is wrong.labelThe words beside it.thumbThe part that moves.trackThe groove the thumb travels in.
CSS PropertyDescription--switch-block-sizeHeight of the track. The width follows it.--switch-inline-sizeLength of the track, if not the derived one.--switch-on-colorFill when it is on.--switch-thumb-colorThe handle, in both states.
Roothelix-headless-switchA control that turns something on or off.
PropTypeDefaultDescriptioncheckedbooleanWhether the control is checked.defaultCheckedbooleanfalseInitial checked state for uncontrolled use, where nothing declared one.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.requiredbooleanfalseWhether the form refuses to submit without it.valuestring"on"Value submitted when the switch is on.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming what this turns on.
EventTypeDescriptionchangeEventRelayed from the input once the state has changed.helix-before-toggleHelixBeforeToggleEventFired before the state changes, and cancelable.inputEventAnnounced once the state has moved.
MethodTypeDescriptionrequestChecked(next: boolean) => booleanRequests a checked change, and reports whether it was applied.resetChecked() => voidDrops the recorded state, so the control reads `defaultChecked` again.toggleChecked() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe input.feedbackWhat is wrong with it.fieldThe row: the track and its label.hintHelp under the control, while nothing is wrong.labelThe words beside it.thumbThe part that moves.trackThe groove the thumb travels in.
ExamplesNameDescriptionDisabledDisabled on and disabled off, since the two look different.EventsA setting that takes effect as it moves, and says so twice.InvalidA switch reporting that it has to be on.PreviewA setting that takes effect as it is switched, rather than on submit.PreviewA setting that takes effect as it is switched, rather than on submit.RequiredA switch that must be on before the form will submit.