<div class="content-section introduction">
  <div class="feature-intro">
    <h1>RadioButton</h1>
    <p>RadioButton is an extension to standard radio button element with theming.</p>
  </div>
  <app-demoactions>
    <div class="app-demoactions any-d-flex any-ai-end any-jc-end any-mt-3">
      <any-button id="view_on_github" icon="fa-brands:github"
        style-class="any-button-rounded any-button-text any-button-lg any-button-plain"></any-button>
    </div>
  </app-demoactions>
</div>
<div class="content-section">
  <div class="full-card">
    <h5>Basic</h5>
    <any-radio-group name="city">
      <div class="any-field-radiobutton">
        <any-radio-button id="rb1" value="Chicago" label="Chicago"></any-radio-button>
      </div>
      <div class="any-field-radiobutton">
        <any-radio-button id="rb2" value="Los Angeles" label="Los Angeles"></any-radio-button>
      </div>
      <div class="any-field-radiobutton">
        <any-radio-button id="rb3" value="New York" label="New York"></any-radio-button>
      </div>
      <div class="any-field-radiobutton">
        <any-radio-button id="rb4" value="San Francisco" label="San Francisco"></any-radio-button>
      </div>
    </any-radio-group>
    <h5>Preselection, Value Binding and Disabled Option</h5>
    <any-radio-group value="losangeles" name="dynamicGroup">
      <div class="any-field-radiobutton">
        <any-radio-button id="rb5" value="chicago" disabled="true" label="Chicago"></any-radio-button>
      </div>
      <div class="any-field-radiobutton">
        <any-radio-button id="rb6" value="losangeles" label="Los Angeles"></any-radio-button>
      </div>
      <div class="any-field-radiobutton">
        <any-radio-button id="rb7" value="newyork" label="New York"></any-radio-button>
      </div>
      <div class="any-field-radiobutton">
        <any-radio-button id="rb8" value="sanfrancisco" label=" San Francisco"></any-radio-button>
      </div>
    </any-radio-group>
  </div>
