Update position of description for individual radio or checkbox

[davicostalf]

When a field is used for a individual radio or checkbox, the position of the description is not correct. It should be directly below the label, to communicate the hierarchy properly. If it's not position this way, it can be confused with the description of the group.

Current implementation

      <RadioGroup label="Radio group">
        <Field>
          <Radio value="1">Option 1</Radio>
          <FieldDescription>
            By clicking you agree with terms and conditions
          </FieldDescription>
        </Field>
        <Field>
          <Radio value="2">Option 2</Radio>
          <FieldDescription>
            By clicking you agree with terms and conditions
          </FieldDescription>
        </Field>
        <Radio value="3">Option 3</Radio>
      </RadioGroup>

Ideal implementation (2px below the label)

[lucasaarcoverde]

Uma maneira possível de chegar a esse comportamento é reutilizando o estilo do FieldDescription para adicionar o help text no label da opção:

<RadioGroup label="Radio group" description="Help">
  <Radio value="1">
    Option 1
    <div data-sl-field-description>
      By clicking you agree with terms and conditions
    </div>
  </Radio>

    <Radio value="2">
      Option 2
      <div data-sl-field-description>
        By clicking you agree with terms and conditions
      </div>
  </Radio>
</RadioGroup>

Uma outra sugestão foi a de reutilizar o Field em si para construção desse comportamento envolvendo o Radio com o Field e adicionando FieldDescription, porém isso causa problemas de acessibilidade já que significaria renderizar vários fields dentro de um field que é o RadioGroup.

Link para sandbox