Version 0.40.0

UI Atoms

Options Group

Options Group

<div class="sui-a-form-options-group">
    <label for="...">
        <input type="radio" name="..." id="..." checked />
        <span class="sui-a-form-options-group__label">Viewer</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..." />
        <span class="sui-a-form-options-group__label">Editor</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..." />
        <span class="sui-a-form-options-group__label">Admin</span>
    </label>
</div>

Options Group inline

<div class="sui-a-form-options-group as--inline">
    <label for="...">
        <input type="radio" name="..." id="..." checked />
        <span class="sui-a-form-options-group__label">Viewer</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..." />
        <span class="sui-a-form-options-group__label">Editor</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..." />
        <span class="sui-a-form-options-group__label">Admin</span>
    </label>
</div>

<div class="sui-a-form-options-group as--inline">
    <label for="...">
        <input type="radio" name="..." id="..." checked />
        <span class="sui-a-form-options-group__label">Viewer</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..." />
        <span class="sui-a-form-options-group__label">Editor</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..." />
        <span class="sui-a-form-options-group__label">Admin</span>
    </label>
</div>

Options Group disabled

<div class="sui-a-form-options-group">
    <label for="...">
        <input type="radio" name="..." id="..." checked  disabled/>
        <span class="sui-a-form-options-group__label">Viewer</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..."  disabled/>
        <span class="sui-a-form-options-group__label">Editor</span>
    </label>
    <label for="...">
        <input type="radio" name="..." id="..."  disabled/>
        <span class="sui-a-form-options-group__label">Admin</span>
    </label>
</div>