0

This sounds trivial but I can't seem to place the helptext right besides the radio button field, if you check this demo you see there is a big gap.

I tried to use grids and custom padding but nothing seems to work, unlike the lightning-input there is no built-in help text attribute per the documentation.

1 Answer 1

2

You defined a flex-box with two column and put the help text on the second one, that's why there's a lot of space between it and the radio buttons. Docs

  1. Add a grid container by adding slds-grid to an HTML element
  2. Add as many slds-col elements as you want inside of your grid container
    Initially, each column takes an equal percentage of the width available.

The column that contains the radio buttons could be a flex-box too (slds-col slds-grid), then you have to simply put the help text next to the radio button (I left the second column):

<template>
    <div class="slds-grid slds-gutters slds-var-p-vertical_medium">
        <div class="slds-col slds-grid">
                <lightning-radio-group
                    name="radioGroup"
                    label="Radio Group"
                    options={options}
                    value={value}
                    type="radio">
                </lightning-radio-group>
                <lightning-helptext content="test"></lightning-helptext>
        </div>
        <div class="slds-col">
            Col 2
        </div>
    </div>
</template>

Try it here

1
  • Thank you @RubenDG
    – Json
    Jul 25, 2022 at 22:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .