radio-button-theme-variants-demos.html

<dom-module id="radio-button-theme-variants-demos">
  <template>
    <style include="vaadin-component-demo-shared-styles">
      :host {
        display: block;
      }
    </style>
    <h3>Direction</h3>
    <vaadin-demo-snippet>
      <template preserve-content>
        <h4>Horizontal</h4>
        <vaadin-radio-group>
          <vaadin-radio-button checked>Option one</vaadin-radio-button>
          <vaadin-radio-button>Option two</vaadin-radio-button>
          <vaadin-radio-button>Option three</vaadin-radio-button>
        </vaadin-radio-group>

        <h4>Vertical</h4>
        <vaadin-radio-group theme="vertical">
          <vaadin-radio-button checked>Option one</vaadin-radio-button>
          <vaadin-radio-button>Option two</vaadin-radio-button>
          <vaadin-radio-button>Option three</vaadin-radio-button>
        </vaadin-radio-group>
      </template>
    </vaadin-demo-snippet>

    <h3>Helper text position</h3>
    <vaadin-demo-snippet id="theme-demos-helper-text-position">
      <template preserve-content>
        <h4>Below</h4>
        <vaadin-radio-group label="Label" helper-text="Helper text below">
          <vaadin-radio-button checked>Option one</vaadin-radio-button>
          <vaadin-radio-button>Option two</vaadin-radio-button>
          <vaadin-radio-button>Option three</vaadin-radio-button>
        </vaadin-radio-group>

        <h4>Above</h4>
        <vaadin-radio-group label="Label" helper-text="Helper text above" theme="helper-above-field">
          <vaadin-radio-button checked>Option one</vaadin-radio-button>
          <vaadin-radio-button>Option two</vaadin-radio-button>
          <vaadin-radio-button>Option three</vaadin-radio-button>
        </vaadin-radio-group>
      </template>
    </vaadin-demo-snippet>


  </template>
  <script>
    class RadioButtonThemeVariantsDemos extends DemoReadyEventEmitter(RadioButtonDemo(Polymer.Element)) {
      static get is() {
        return 'radio-button-theme-variants-demos';
      }
    }
    customElements.define(RadioButtonThemeVariantsDemos.is, RadioButtonThemeVariantsDemos);
  </script>
</dom-module>