Primitiveinput

Input Group

Stable

Um campo só feito de vários elementos: a borda, o anel de foco e o estado inválido pertencem ao invólucro, e o controle dentro abre mão dos três. A pessoa vê uma caixa, e o anel cerca a caixa em vez de cercar o input. O invólucro é um div e não nomeia nada, então quem carrega o rótulo continua sendo o controle. Compõe Input, Textarea e Button do Up Web DS.

Instalação

npx up-web-ds add input-group

Preview

Default

With Text

npx
ms

With Button

With Textarea

Vira metadata.description

Invalid

id

Já existe um item com esse nome. Use npm run ds:compare em vez de criar um duplicado.

All states

Default

With Text

npx
ms

With Button

With Textarea

Vira metadata.description

Invalid

id

Já existe um item com esse nome. Use npm run ds:compare em vez de criar um duplicado.

Usage

Imports de Input Group
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group'
import { SearchIcon } from 'lucide-react'
Input Group
<InputGroup className="w-full max-w-sm">
  <InputGroupAddon>
    <SearchIcon aria-hidden />
  </InputGroupAddon>
  <InputGroupInput
    placeholder="Buscar no catálogo"
    aria-label="Buscar no catálogo"
  />
</InputGroup>

Props

InputGroup

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

InputGroupAddon

Props de InputGroupAddon
PropTypeDefaultDescription
align"inline-end" | "inline-start" | "block-start" | "block-end" | null'inline-start'

Estende React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>. Aceita também os atributos padrão de um elemento React (280 não listados).

InputGroupButton

Props de InputGroupButton
PropTypeDefaultDescription
size"sm" | "xs" | "icon-xs" | "icon-sm" | null'xs'
type"button" | "submit" | "reset"'button'
variant"link" | "destructive" | "primary" | "outline" | "secondary" | "ghost" | null'ghost'
classNamestring | ((state: ButtonState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabledbooleanfalseWhether the button should be focusable when disabled.
nativeButtonbooleantrueWhether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
styleReact.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

Estende Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants>. Aceita também os atributos padrão de um elemento React (284 não listados).

InputGroupText

Estende React.ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

InputGroupInput

Estende React.ComponentProps<'input'>. Aceita também os atributos padrão de um elemento React (310 não listados).

InputGroupTextarea

Estende React.ComponentProps<'textarea'>. Aceita também os atributos padrão de um elemento React (294 não listados).

Composition

O campo e os seus adornos são irmãos: o InputGroupAddon se posiciona por `align`, e não por onde foi escrito.

Composição de InputGroup

InputGroup

  • InputGroupAddon
    • InputGroupText
    • InputGroupButton
  • InputGroupInput
  • InputGroupTextarea

Metadata

Notas de acessibilidade

Teclado verificado por teste: com addons de texto o campo custa um Tab stop, e com um botão dentro dele custa dois — que é a contagem honesta, já que ali existem mesmo dois controles. Leitor de tela verificado por teste: o invólucro não declara papel algum, o nome acessível vem do controle e não do prefixo — "ms" é um fato sobre a resposta, não parte da pergunta —, e aria-invalid vive no controle, de onde o invólucro o lê para desenhar a borda, de modo que os dois nunca discordam. Touch verificado em navegador com emulação de toque em viewport de 375px: o campo tem 36px de altura, os botões internos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, e o alinhamento block transforma a linha em pilha para o textarea em vez de espremer uma coluna ao lado. Reduced motion verificado com prefers-reduced-motion: reduce — a transição de cor e de anel do invólucro não é movimento e permanece: remover uma transição de cor não acomoda ninguém e custa a única pista que o estado tem. Nenhum deslocamento existe aqui para ser desligado.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
input
Status
Stable

Origem e distribuição

Fonte
shadcn registry / input-group
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/input-group.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
class-variance-authority
Ícones
Nenhum
Construído sobre
InputTextareaButton
Usado por
Combobox