Form düzeni

<form class="sc-col" style="max-width:720px" onsubmit="event.preventDefault(); Armada.toast({ title: 'Kaydedildi', tone: 'success' })">
    <armada:fieldset legend="Kişisel bilgiler" description="Faturada görünecek bilgiler.">
        <div class="arm-form-grid">
            <armada:input label="Ad" name="first_name" required />
            <armada:input label="Soyad" name="last_name" required />
            <armada:input label="E-posta" type="email" name="email_address" icon="mail" class="arm-span-full" />
            <armada:select label="Ülke" name="country_code" :options="['tr' => 'Türkiye', 'de' => 'Almanya']" />
            <armada:input label="Posta kodu" name="zip" inputmode="numeric" />
        </div>
    </armada:fieldset>
    <armada:separator />
    <armada:fieldset legend="Tercihler">
        <armada:switch align="end" label="Pazarlama e-postaları" description="Kampanya ve yenilikler" />
        <armada:radio.group label="Fatura türü" horizontal>
            <armada:radio name="invoice" value="personal" label="Bireysel" checked />
            <armada:radio name="invoice" value="corporate" label="Kurumsal" />
        </armada:radio.group>
    </armada:fieldset>
    <div class="sc-row" style="justify-content:flex-end">
        <armada:button type="reset">Temizle</armada:button>
        <armada:button type="submit" variant="solid" tone="primary">Kaydet</armada:button>
    </div>
</form>

<div class="sc-col sc-narrow">
    <armada:field label="E-posta">
        <armada:input icon="mail" value="amiral@" invalid />
        <armada:error message="Geçerli bir e-posta adresi girin." />
    </armada:field>
    <armada:field label="Şifre" description="En az 8 karakter">
        <armada:input type="password" icon="lock" value="123" invalid viewable />
        <armada:error message="Şifre en az 8 karakter olmalı." />
    </armada:field>
</div>

<div style="max-width:560px" class="sc-col">
    <armada:field label="Dil" description="Arayüz dili" inline>
        <armada:select :options="['tr' => 'Türkçe', 'en' => 'English']" style="width:160px" />
    </armada:field>
    <armada:separator />
    <armada:field label="Saat dilimi" description="Raporlarda kullanılır" inline>
        <armada:select :options="['Europe/Istanbul']" style="width:160px" />
    </armada:field>
</div>