Inline radio buttons under the label

[smartm0use]

Hello,
according to documentation we have two layout for radio buttons:

I need to have label and radio buttons displayed in the following way:

How to do that using Fomantic classes?

[lubber-de]

If you click on the empty tag to the right, you will see the necessary html code

which will reveil that it's done via inline fields

<div class="ui form">
  <div class="inline fields">
    <label for="fruit">Select your favorite fruit:</label>
    <div class="field">
      <div class="ui radio checkbox checked">
        <input type="radio" name="fruit" checked="" tabindex="0" class="hidden">
        <label>Apples</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit" tabindex="0" class="hidden">
        <label>Oranges</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit" tabindex="0" class="hidden">
        <label>Pears</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit" tabindex="0" class="hidden">
        <label>Grapefruit</label>
      </div>
    </div>
  </div>
</div>

[smartm0use]

Maybe you misunderstand me.
I can see two ways of displaying radio buttons:

1. Inline radio buttons after the label
2. Vertical list of radio buttons under the label

I need to have a third way:
3) Inline buttons under the label

[smartm0use]

Is it possible to do that using Fomantic classes?

[lubber-de]

Two options:

• Use field widths
• Put all checkboxes next to each other inside a single field

https://jsfiddle.net/lubber/wn6ar20g/5/

[ko2in]

I adjusted @lubber-de fiddle (https://jsfiddle.net/ko2in/y7eup8b0/2/) to get a better layout with nice spacing between the fields.

[smartm0use]

Thank you for your replies.
I prefer the second options by lubber-de.

What about to add that in the documentation, as third option for Fomantic radio buttons?

[ko2in]

The documentation has enough explanation in my opinion. You just need to tweak the usages of field, inline fields according to your needs.

[smartm0use]

Anyway, @ko2in your code is different against the screenshot you attached.

[ko2in]

Not sure how it looks for you. But, it works exactly like my screenshot.

[smartm0use]

[ko2in]

The inline fields are grid layouts. It changes the width according to the screen size.

[smartm0use]

Sorry, my bad!