Navegar componentes

InputGroup

FieldExemplo

InputGroup conecta um input com addons de prefix/suffix em uma única unidade visual. Use para campos de URL, inputs de moeda, campos de busca com botões de ação ou qualquer input que precise de decorações contextuais.

Importação

import {InputGroup} from '@pharos-ds/core/InputGroup';

Exemplos

Área interativa

size

isDisabled

Site

https://

Domínio

Código

import {InputGroup} from '@pharos-ds/core/InputGroup';

<InputGroup
  label="Site"
  size="md"
  isDisabled={false}
 />

Boas práticas

Faça: Use addons de texto para mostrar unidades, prefixos ou sufixos que esclarecem o formato do input (ex.: "$", "kg", "https://").
Faça: Use InputGroupText para prefixos/sufixos estáticos como "$", "kg" ou "https://".
Faça: Use InputGroup com inputs single-line compatíveis: TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector e MultiSelector.
Faça: Mantenha o label de cada input interno específico; inputs agrupados combinam automaticamente o label do grupo com seu próprio label e herdam o contexto de description/status do grupo.
Evite: Não coloque múltiplos text inputs em um grupo; use fields separados.
Evite: Não use InputGroup para inputs não relacionados; é para um único input com decorações.
Evite: Não use InputGroup com TextArea, Slider, Switch, CheckboxInput ou RadioList.

Props

Prop	Tipo	Padrão	Descrição
`children` *	`ReactNode`	—	Filhos InputGroupText e inputs compatíveis: TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector ou MultiSelector.
`label` *	`string`	—	Label acessível para o grupo.
`isLabelHidden`	`boolean`	`false`	Oculta visualmente o label.
`description`	`string`	—	Texto de ajuda entre o label e o input group.
`isDisabled`	`boolean`	`false`	Desabilita todo o grupo.
`isOptional`	`boolean`	`false`	Exibe indicador "(optional)".
`isRequired`	`boolean`	`false`	Marca o field como required.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho padrão para inputs no grupo.
`status`	`{type: 'warning' \| 'error' \| 'success', message?: string}`	—	Indicador de status aplicado à borda do grupo.
`labelTooltip`	`string`	—	Texto de tooltip no final do label.
`xstyle`	`StyleXStyles`	—	Estilos StyleX para customização de layout.
`data-testid`	`string`	—	Seletor de teste.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/InputGroup