Fieldset
O título de um grupo de campos ou de opções que respondem uma pergunta só.
Nesta página
Playground
Dica
Fundo
<fieldset class="feitio-fieldset"><legend class="feitio-label">Avisar por</legend><div class="feitio-choices"><label class="feitio-choice"><input type="checkbox" checked>Discord</label><label class="feitio-choice"><input type="checkbox">E-mail</label></div></fieldset>Quando usar
- Em volta de Radios e de grupos de Checkbox, sempre.
- Para campos que são uma coisa só: o horário, um endereço.
Quando não usar
- Para separar partes de uma página longa: títulos (Heading) e blocos.
Exemplos
Um grupo com a pergunta
O título é a pergunta; a dica fica colada nele (space-1); o grupo, um pouco mais longe (space-3); o erro do grupo, a space-2 da última opção.
Mostrar código
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Quando lembrar?</legend>
<span class="feitio-hint">Horário de São Paulo</span>
…
</fieldset>Anatomia
- Título: a pergunta do grupo inteiro.
- Dica, opcional: colada no título (
space-1). - O grupo: opções ou campos, um pouco mais longe (
space-3).
Acessibilidade
- O
<legend>é anunciado antes de cada campo do grupo: escreva-o como a pergunta. - Erro do grupo: a mensagem logo abaixo das opções, com o ícone e em vinho.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-fieldset" | obrigatório | O grupo com título, nos espaços da régua. |
<legend> | a pergunta | O título do grupo. |
class="feitio-hint" | opcional | A dica, a space-1 do título. |
aria-invalid="true" | com erro | A mensagem embaixo do grupo. |