ControlGroup

Tipo: Componente Angular

DesignersFigmaAinda não disponível
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O ControlGroup agrupa uma série de elementos de entrada e ação relacionados em uma única linha contínua. Ele é utilizado para criar controles compostos, como campos de busca com botões de filtro ou inputs com seletores de unidade, reforçando a relação direta entre os componentes.

Diretrizes de Comportamento

Unidade Visual: Os elementos dentro do grupo devem compartilhar bordas internas (removendo o arredondamento de cantos que se tocam) para parecerem uma única peça.
Componentes Suportados: Pode combinar Buttons, Inputs, Selects e demais inputs.
Ordem Lógica: Posicione a entrada de dados principal à esquerda e a ação ou seletor de apoio à direita.
- Exemplo: Input de busca + Botão de lupa.
Consistência de Altura: Todos os componentes dentro de um ControlGroup devem ter exatamente a mesma altura para não quebrar a linha visual.
Vá Direto ao Ponto: Como o espaço é reduzido, evite rótulos longos nos botões agrupados.
- Ruim: [ Buscar agora ]
- Melhor: [ Buscar ] ou apenas o ícone.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<div class="mds-control-group" role="group">
  <button class="mds-btn mds-btn--control">
  <span class="mds-btn__label">Opção 1</span>
</button><button class="mds-btn mds-btn--control mds-btn--selected">
  <span class="mds-btn__label">Opção 2</span>
</button><button class="mds-btn mds-btn--control">
  <span class="mds-btn__label">Opção 3</span>
</button>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`modifier`	`control` `primary` `secondary` `success` `danger`	`control`
`size`	`xs` `sm` `md` `lg`	—
`rounded`	`true` · `false`	—
`required`	`true` · `false`	—
`selectedIndex`	—	`1`
`count`	—	`3`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-btn-toolbar` `.mds-control-group` `.mds-control-group-toggle` `.mds-input` `.mds-input-group` `.mds-select`
Elementos	`.mds-dropdown__toggle`
Modificadores	`.mds-btn--selected` `.mds-control-group--block` `.mds-control-group--required` `.mds-control-group--select`

Angular (mds-angular)

Seletor

mds-control-group

Agrupe uma série de ítens relacionados em uma única linha com o grupo de botões.

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`label`	`string`	`''`	Label do grupo
`role`	`string`	`'group'`	role WAI-ARIA
`additionalClass`	`string`	`''`	Classe adicional para o componente
`mode`	`'button' \| 'select'`	`'button'`	Modo para o Radio e Checkbox

Storybook mds-styles (HTML/CSS) — components-controlgroup ↗

Componentes relacionados

Input