Step Item

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Subcomponente de Composição

O br-step-item representa um passo individual no indicador de etapas. Deve ser declarado dentro do componente orquestrador <br-step>.

Visão Geral

Subcomponente individual de br-step, responsável por representar visualmente e semanticamente uma etapa específica do fluxo.

Papel na composição

• Exibe o indicador numérico ou ícone da etapa, o rótulo descritivo e o estado de conclusão.
• Permite navegação interativa opcional caso etapas anteriores possam ser revisitadas diretamente com clique.

Regra de uso e relacionamento

Deve ser declarado no slot padrão do orquestrador br-step. O componente pai calcula a orientação (horizontal ou vertical), as linhas de conexão intermediárias e aplica os atributos de acessibilidade da etapa atual. Não deve ser usado fora de um br-step.

Para a documentação completa de design, consulte o Design System do GovBR.

Propriedades

active

Atributo	active
Descrição	Propriedade que define se o item Step está com estado ativo.
Tipo	boolean
Valor padrão	false

ariaLabel

Atributo	aria-label
Descrição	Rótulo acessível explicitamente definido para o botão interno do item. Quando preenchido, substitui o texto gerado automaticamente pelo componente ("passo X ...") em qualquer modo, seguindo o comportamento padrão do atributo HTML aria-label.
Tipo	string
Valor padrão	''

brIconAria

Atributo	br-icon-aria
Descrição	Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
Tipo	string
Valor padrão	''

brIconName Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	br-icon-name
Depreciação	Prefira contentType="slotted" com um SVG, asset ou elemento de ícone controlado pela aplicação.
Descrição	Identificador legado do ícone exibido como conteúdo do step item quando contentType é br-icon. Prefira o slot content-area com um SVG ou elemento de ícone controlado pela aplicação.
Tipo	string
Valor padrão	''

controlsId

Atributo	controls-id
Descrição	ID do elemento controlado por este item, atribuído como aria-controls no botão interno. Vincula semanticamente o controle ao painel ou região que ele gerencia — podendo ser usado em qualquer contexto que exija essa ligação
Tipo	string
Valor padrão	''

disabled

Atributo	disabled
Descrição	Propriedade que define se o item Step está com estado desativado.
Tipo	boolean
Valor padrão	false

highlight

Atributo	highlight
Descrição	Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning".
Tipo	"danger" | "info" | "success" | "warning"
Valor padrão	---

label

Atributo	label
Descrição	Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.
Tipo	string
Valor padrão	''

Slots

Nome	Descrição
"content-area"	Slot para conteúdo customizado dentro do botão do item do step.
"step-content"	Slot para conteúdo da etapa exibido no layout vertical (texto, formulário, etc.).

Métodos

handleShowTimeLine

Descrição	Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.
Assinatura	handleShowTimeLine(value: boolean, layout: StepItemLayout) => Promise<void>
Parâmetros	value: layout:

setContent

Descrição	Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem
Assinatura	setContent(value: string) => Promise<void>
Parâmetros	value:

setContentType

Descrição	Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem
Assinatura	setContentType(value: StepItemContentType) => Promise<void>
Parâmetros	value:

setItemRole

Descrição	Define o role ARIA do botão interno. Chamado pelo componente pai quando o contexto semântico exige um role diferente do padrão option (ex.: tab em contexto de tablist).
Assinatura	setItemRole(value: StepItemRole) => Promise<void>
Parâmetros	value:

setLabelPosition

Descrição	Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado
Assinatura	setLabelPosition(value: StepItemLabelPosition) => Promise<void>
Parâmetros	value:

setMode

Descrição	Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.
Assinatura	setMode(value: StepItemMode) => Promise<void>
Parâmetros	value:

setStepItemPositionStatus

Descrição	Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente
Assinatura	setStepItemPositionStatus(value: StepItemPositionStatus) => Promise<void>
Parâmetros	value:

setVerticalContentPlacement

Descrição	Método que define a posição do conteúdo no layout vertical.
Assinatura	setVerticalContentPlacement(value: StepItemVerticalContentPlacement) => Promise<void>
Parâmetros	value:

CSS Shadow Parts

Nome	Descrição
"label"	Parte para o contêiner do texto da etapa, usada para estilizar tipografia e cor via ::part().

Dependências

Componente pai

• br-step

Usado por

• br-carousel
• br-wizard

Depende de

• br-icon

Gráfico