switch

An on/off setting. Submits 0 when off.

Example

Division

Laravel

<x-admin::form-grid>
    <x-admin::stack gap="2">
        <x-admin::checkbox name="g_notify" label="Email owners when a run fails" checked />
        <x-admin::switch name="g_live" label="Sync is live" checked />
        <x-admin::radio name="g_single" value="a" label="A radio on its own" />
    </x-admin::stack>
    <x-admin::radio-group name="g_division" label="Division" value="pro" :options="['pro' => 'Professional', 'age' => 'Age group']" />
</x-admin::form-grid>

Props

PropRequiredDefaultOptions
namenull
labelnull
hintnull
errornull
idnull
value"1"
checkedfalse
unchecked-value"0"

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Switch } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-form-grid"><div class="adm-stack" style="gap:var(--ad-space-2)"><div class="adm-field">
        <label class="adm-check">
        <input type="checkbox"  name="g_notify"   id="g_notify"  value="1" checked  >
        <span>Email owners when a run fails</span>
    </label>
        </div>
        <div class="adm-field">
    <input type="hidden" name="g_live" value="0">    <label class="adm-check">
        <input type="checkbox" role="switch" class="adm-switch"  name="g_live"   id="g_live"  value="1" checked >
        <span>Sync is live</span>
    </label>
        </div>
        <label class="adm-check">
    <input type="radio"  name="g_single"   value="a"  >
    <span>A radio on its own</span>
</label></div>
    <fieldset class="adm-fieldset">
            <legend class="adm-label">Division</legend>
        <div class="adm-radios">
                                <label class="adm-check">
                <input type="radio" name="g_division" id="g_division_0" value="pro" checked   >
                <span>Professional</span>
            </label>
                                <label class="adm-check">
                <input type="radio" name="g_division" id="g_division_1" value="age"    >
                <span>Age group</span>
            </label>
            </div>
        </fieldset></div>