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

      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.

      children
      iOS
      Android
      Harmony
      TypeReactNode | [object Object]
      children
      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.

      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.