组件

分组新

使用 role="group" 和 role="search" 将表单元素与按钮水平堆叠。

role="group" 用于将子元素水平堆叠。

与 <form> 标签一起使用时，分组为 width: 100%;。

与 .grid（见栅格）不同，列在移动设备上不会被折叠。

查看源码

<form>
<fieldset role="group">
  <input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
  <input type="submit" value="Subscribe" />
</fieldset>
</form>

该组件主要面向表单元素与按钮设计。根据获得焦点的子元素是 <input> 还是 <button>，分组会呈现相应的 :focus 样式。

分组的 :focus 样式依赖 :has() CSS 选择器。当 :has() 不受支持时，子元素将使用各自常规的 :focus 样式。

查看源码

<form>
<fieldset role="group">
  <input name="email" type="email" placeholder="Email" autocomplete="email" />
  <input name="password" type="password" placeholder="Password" />
  <input type="submit" value="Log in" />
</fieldset>
</form>

搜索

role="search" 同样将子元素水平堆叠，并提供一种与 <input type="search"> 保持一致的特殊样式（见搜索输入框）。

查看源码

<form role="search">
<input name="search" type="search" placeholder="Search" />
<input type="submit" value="Search" />
</form>

按钮

role="group" 也很适合用来归组一系列按钮。

查看源码

<div role="group">
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>

查看源码

<div role="group">
<button aria-current="true">Active</button>
<button>Button</button>
<button>Button</button>
</div>

查看源码

<div role="group">
<button>Button</button>
<button class="secondary">Button</button>
<button class="contrast">Button</button>
</div>