Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Workspace preferences
  • Permissions and validation
  • Recommendations
  • Usage boundaries
  • API reference

Forms

Switch

Changes a setting that takes effect immediately.

idle

Usage

import { Switch } from "@mizen-labs/ui";

Examples

Workspace preferences

Choose how this workspace syncs and displays content.

Permissions and validation

Recommendations

GuidancePractice
Do

Describe the setting in its enabled state. Keep immediate changes visible and explain failed updates.

Usage boundaries

GuidanceBoundary
Scope

Use Checkbox for choices collected before submission. The application owns saving and rollback.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
checkedbooleanfalseControls the on state.
defaultCheckedbooleanfalseSets the initial on state.
onCheckedChange(checked: boolean, eventDetails) => void—Receives checked-state changes.
disabledbooleanfalsePrevents interaction.
invalidbooleanfalseMarks the switch invalid.
readOnlybooleanfalsePrevents changes while keeping the state readable.
sizeSwitchSize"default"Selects the control size.
PreviousSliderNextTextarea

Install updates when they become available.

Keep this workspace synchronized across devices.