For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/ui/components/radio-group.md.
lynx-ui logo
lynx-ui
  • English

      • RadioGroup

      A headless RadioGroup component for ReactLynx. It manages single-selection state across a group of radio buttons.

      Basic Usage

      lynx-ui-radio-groupBasic/index.tsx
      Code
      Preview

      Disabled

      RadioGroup supports disabling the entire group or individual options.

      lynx-ui-radio-groupDisabled/index.tsx
      Code
      Preview

      Structure

      <RadioGroupRoot>
  <Radio>
    <RadioIndicator />
  </Radio>
</RadioGroupRoot>

      API

      RadioGroupRoot

      The root component of the RadioGroup, containing all of its child components.

      defaultValue
      iOS
      Android
      Harmony
      Typestring
      If the Radio is initially selected with certain value. Use this property means the RadioGroup is uncontrolled. If the value matches none of the Radio's value, the RadioGroup will be unselected.
      disabled
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      If set to true, the RadioGroup can not accept interactions.
      onValueChange
      iOS
      Android
      Harmony
      Type(value: string) => void
      Send when selected value changed
      value
      iOS
      Android
      Harmony
      Typestring
      Control the selected value of the RadioGroup. Use this property means the RadioGroup is controlled. If the value matches none of the Radio's value, the RadioGroup will be unselected.
      children
      iOS
      Android
      Harmony
      TypeReactNode | ((state: { value: string | null; disabled: boolean }) => ReactNode)
      children

      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-value
      Render Propvalue·Typestring | null
      The current selected value of the RadioGroup. Applied when `status.value` is not `null`.
      ui-disabled
      Render Propdisabled·Typeboolean
      Whether the RadioGroup is disabled. Applied when `status.disabled` is true.

      Radio

      The item inside RadioGroup.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      disabled
      iOS
      Android
      Harmony
      Typeboolean
      Disable this Radio. If set to true, this single Radio can not accept interactions.
      radioProps
      iOS
      Android
      TypeViewProps
      Radio supports original view props to be directly spread in this prop.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      value
      iOS
      Android
      Harmony
      Typestring
      The identifier of this Radio

      RadioIndicator

      The check slot indicating this Radio is now selected. Normally a circle. It's children will only be rendered when selected so it can be a custom inner selected indicator. Can be a ReactNode or a render function returns a ReactNode.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      forceMount
      iOS
      Android
      Typeboolean·Defaultfalse
      Force mount the children. If set to true, the children will always be mounted even when checked is false.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      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.