<div class="form_field">
    <label class="form_label" for="">
      Options radio
    </label>
    <ul class="form_fieldgroup">
        <li class="form_field form_field-check">
            <input class="form_check" name="options-radio" id="options-radio-option-1" value="option-1" type="radio">
            <label class="form_label" for="options-radio-option-1">
            Option 1
          </label>
        </li>
        <li class="form_field form_field-check">
            <input class="form_check" name="options-radio" id="options-radio-option-2" value="option-2" type="radio">
            <label class="form_label" for="options-radio-option-2">
            Option 2
          </label>
        </li>
        <li class="form_field form_field-check">
            <input class="form_check" name="options-radio" id="options-radio-option-3" value="option-3" type="radio">
            <label class="form_label" for="options-radio-option-3">
            Option 3
          </label>
        </li>
    </ul>
</div>
<div class="form_field">
    <label class="form_label" for="">
      {{ label }}
    </label>
    <ul class="form_fieldgroup">
      {{#each options}}
        <li class="form_field form_field-check">
          <input class="form_check" name="{{ ../id }}" id="{{ ../id }}-{{ id }}" value="{{value}}" type="radio">
          <label class="form_label" for="{{ ../id }}-{{ id }}">
            {{ label }}
          </label>
        </li>
      {{/each}}
    </ul>
  </div>
{
  "label": "Options radio",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "id": "options-radio",
  "options": [
    {
      "id": "option-1",
      "value": "option-1",
      "label": "Option 1"
    },
    {
      "id": "option-2",
      "value": "option-2",
      "label": "Option 2"
    },
    {
      "id": "option-3",
      "value": "option-3",
      "label": "Option 3"
    }
  ]
}

Generic form

There are some predefined form styles included in the framework. By default forms are simple and run from top to bottom. You can use the grid or other spacing utilities to further customize the form.

Form buttons

Form submit buttons are styled using the .btn class.

Forms in SilverStripe

Form Markup in the SilverStripe CMS is created by the system, for convenience there is a .ss-form class that when wrapping a form will style it automagically.

<div class="ss-form">
  $SilverStripeForm
</div>

See also the example in this documentation.