選択と操作

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="sel_few">役割</label>
  <select rst-input id="sel_few" name="sel_few">
    <option value="admin" selected>管理者</option>
    <option value="editor">編集者</option>
    <option value="member">メンバー</option>
  </select>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="sel_many">都市</label>
  <select rst-input id="sel_many" name="sel_many" data-rst-select data-rst-select-filter="入力して絞り込む" data-rst-select-results="{n} 件" data-rst-select-result-one="1 件" data-rst-select-no-matches="一致する項目はありません" aria-describedby="sel_many-help">
    <option value="dublin" selected>ダブリン</option>
    <option value="lisbon">リスボン</option>
    <option value="madrid">マドリード</option>
    <option value="berlin">ベルリン</option>
    <option value="rome">ローマ</option>
    <option value="athens">アテネ</option>
    <option value="helsinki">ヘルシンキ</option>
    <option value="reykjavík">レイキャビク</option>
    <option value="warsaw">ワルシャワ</option>
    <option value="zagreb">ザグレブ</option>
    <option value="tallinn">タリン</option>
    <option value="valletta">バレッタ</option>
  </select>
  <p rst-field-help id="sel_many-help">入力すると絞り込めます。</p>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="sel_plain">都市</label>
  <select rst-input id="sel_plain" name="sel_plain">
    <option value="dublin" selected>ダブリン</option>
    <option value="lisbon">リスボン</option>
    <option value="madrid">マドリード</option>
    <option value="berlin">ベルリン</option>
    <option value="rome">ローマ</option>
    <option value="athens">アテネ</option>
    <option value="helsinki">ヘルシンキ</option>
    <option value="reykjavík">レイキャビク</option>
    <option value="warsaw">ワルシャワ</option>
    <option value="zagreb">ザグレブ</option>
    <option value="tallinn">タリン</option>
    <option value="valletta">バレッタ</option>
  </select>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="sel_error">役割</label>
  <select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error">
    <option value="admin" selected>管理者</option>
    <option value="editor">編集者</option>
    <option value="member">メンバー</option>
  </select>
  <p rst-field-error id="sel_error-error" role="alert">この人の役割を選んでください。</p>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="sel_grouped">地域</label>
  <select rst-input id="sel_grouped" name="sel_grouped" data-rst-select data-rst-select-filter="入力して絞り込む" data-rst-select-results="{n} 件" data-rst-select-result-one="1 件" data-rst-select-no-matches="一致する項目はありません">
    <optgroup label="ヨーロッパ">
      <option value="dublin" selected>ダブリン</option>
      <option value="lisbon">リスボン</option>
      <option value="warsaw">ワルシャワ</option>
    </optgroup>
    <optgroup label="南北アメリカ">
      <option value="montreal">モントリオール</option>
      <option value="lima">リマ</option>
      <option value="austin">オースティン</option>
    </optgroup>
    <optgroup label="アジア">
      <option value="osaka">大阪</option>
      <option value="hanoi">ハノイ</option>
      <option value="dhaka">ダッカ</option>
    </optgroup>
    <optgroup label="アフリカ">
      <option value="accra">アクラ</option>
      <option value="nairobi">ナイロビ</option>
      <option value="tunis">チュニス</option>
    </optgroup>
  </select>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<label rst-switch>
  <input type="checkbox" name="notify_on" checked>
  <span rst-switch-track aria-hidden="true"></span>
  返信をメールで知らせる
</label>

これは <section rst-box><form rst-form> の中に置きます。

<label rst-switch>
  <input type="checkbox" name="notify_off">
  <span rst-switch-track aria-hidden="true"></span>
  メンションをメールで知らせる
</label>

これは <section rst-box><form rst-form> の中に置きます。

<label rst-switch>
  <input type="checkbox" name="notify_disabled" disabled>
  <span rst-switch-track aria-hidden="true"></span>
  週ごとのまとめをメールで受け取る
</label>

これは <section rst-box><form rst-form> の中に置きます。

<fieldset rst-choice>
  <legend>プラン</legend>
  <div rst-choice-cards>
    <label>
      <input type="radio" name="plan" value="free">
      <span>
        <span rst-choice-title>無料</span>
        <span rst-choice-desc>プロジェクト1件、コミュニティによるサポート。</span>
      </span>
    </label>
    <label>
      <input type="radio" name="plan" value="pro" checked>
      <span>
        <span rst-choice-title>プロ</span>
        <span rst-choice-desc>プロジェクト無制限、サポート窓口つき。</span>
      </span>
    </label>
  </div>
</fieldset>

これは <section rst-box><form rst-form> の中に置きます。

<fieldset rst-choice>
  <legend>受け取るもの</legend>
  <div rst-choice-cards>
    <label>
      <input type="checkbox" name="digest" value="replies" checked>
      <span>
        <span rst-choice-title>返信</span>
        <span rst-choice-desc>その都度。</span>
      </span>
    </label>
    <label>
      <input type="checkbox" name="digest" value="weekly">
      <span>
        <span rst-choice-title>週ごとのまとめ</span>
        <span rst-choice-desc>毎週月曜の朝。</span>
      </span>
    </label>
  </div>
</fieldset>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">投稿を保存</button>
  <a rst-btn="lg" href="/posts">投稿一覧に戻る</a>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">招待を送信</button>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">公開する</button>
  <a rst-btn="lg" href="/posts">投稿一覧に戻る</a>
</div>

これは <section rst-box><form rst-form> の中に置きます。

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit" aria-busy="true" disabled>
    <span rst-spin aria-hidden="true"></span>
    公開する
  </button>
  <a rst-btn="lg" href="/posts">投稿一覧に戻る</a>
</div>

これは <section rst-box> の中に置きます。

<form rst-form-actions method="post" action="/posts/1/delete">
  <input type="hidden" name="csrf" value="tok-123">
  <input type="hidden" name="id" value="1">
  <a rst-btn="ghost lg" href="/posts/1">キャンセル</a>
  <button type="submit" rst-btn="danger lg">この投稿を削除</button>
</form>

これは <section rst-box> の中に置きます。

<form rst-form-actions method="post" action="/posts/1/publish">
  <a rst-btn="ghost lg" href="/posts/1">キャンセル</a>
  <button type="submit" rst-btn="primary lg">公開する</button>
</form>