Lynx UI logo
Lynx UI
  • English

      • <Switch>

      A headless Switch (toggle) component for ReactLynx. It provides unstyled primitives for toggle states.

      Basic Usage

      The basic usage of <Switch>

      lynx-ui-switchBasic/index.tsx
      Code
      Preview

      Structure

      <Switch>
  <SwitchThumb />
</Switch>
      <Switch>
  <SwitchTrack />
  <SwitchThumb />
</Switch>

      API

      SwitchTrack

      The track of the Switch. Represents the background area on which the thumb slides. Can also be used for pressed overlays or state decorations.

      children
      iOS
      Android
      TypeReactNode
      Content slot of the track. Allows custom elements, can be used to add overlays or state decorations.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style

      SwitchThumb

      The thumb of the Switch. The draggable/clickable handle that toggles the state.

      children
      iOS
      Android
      TypeReactNode
      Content slot of the thumb. Allows custom elements such as icons.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style

      Switch

      Props for the Switch component.

      checked
      iOS
      Android
      Typeboolean
      Whether the Switch is checked. If checked is provided, the component is controlled and defaultChecked is ignored.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      defaultChecked
      iOS
      Android
      Typeboolean·Defaultfalse
      The initial checked state when used as an uncontrolled component.
      disabled
      iOS
      Android
      Typeboolean·Defaultfalse
      Whether the user can interact with the Switch. When true, the Switch cannot be toggled.
      onChange
      iOS
      Android
      Type(checked: boolean) => void
      Callback fired when the checked state changes.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      switchProps
      iOS
      Android
      TypeViewProps
      Switch supports original view props to be directly spread in this prop.
      children
      iOS
      Android
      TypeReactNode | ((status: { checked: boolean; active: boolean; disabled: boolean }) => ReactNode)
      Content displayed inside or next to the Switch.

      State-based styling & rendering

      This component exposes each of its internal states through two interchangeable channels, and the table below maps them one-to-one:

      • CSS className — a class like ui-<state> is toggled on the root node, so you can style it with selectors such as .ui-<state> { ... }.
      • Render-prop field — when children is a function, the same state is passed in via children({ <state>: boolean, ... }) for runtime-driven rendering.
      ui-checked
      Render Propchecked·Typeboolean
      Whether the Switch is currently checked. Applied when `status.checked` is true.
      ui-active
      Render Propactive·Typeboolean
      Whether the Switch is active (pressed or being interacted with). Applied when `status.active` is true.
      ui-disabled
      Render Propdisabled·Typeboolean
      Whether the Switch is disabled. Applied when `status.disabled` is true.
      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.