Primitiveinput

Input

Stable

Campo de texto de uma linha. Composto sobre Base UI Input, então uma aplicação consumidora pode envolvê-lo em um Field e receber rótulo, descrição e estado de validação sem que o primitive saiba que o Field existe.

Instalação

npx up-web-ds add input

Preview

Basic

Default

With Value

Kebab-case, único em todo o design system.

Invalid

Já existe um primitive com esse id. Use ds:compare em vez de criar um segundo.

Disabled

Primitives são domain-free.

Read Only

Vem da proveniência registrada.

Types

All states

Basic

Default

With Value

Kebab-case, único em todo o design system.

Invalid

Já existe um primitive com esse id. Use ds:compare em vez de criar um segundo.

Disabled

Primitives são domain-free.

Read Only

Vem da proveniência registrada.

Types

Usage

Imports de Input
import { Input } from '@/components/ui/input'
import { useId } from 'react'
Input
function ItemIdField() {
  const id = useId()

  return (
    <div className="flex w-full max-w-sm flex-col gap-1.5">
      <label htmlFor={id} className="type-small font-medium">
        Id do item
      </label>
      <Input id={id} placeholder="question-card" />
    </div>
  )
}

Props

Props de Input
PropTypeDefaultDescription
classNamestring | ((state: InputState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
defaultValuestring | number | readonly string[]sem valor padrãoThe default value of the input. Use when uncontrolled.
onValueChange((value: string, eventDetails: Input.ChangeEventDetails) => void)sem valor padrãoCallback fired when the `value` changes. Use when controlled.
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState>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: InputState) => 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.
valuestring | number | readonly string[]sem valor padrãoThe value of the input. Use when controlled.

Estende InputPrimitive.Props. Aceita também os atributos padrão de um elemento React (304 não listados).

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: alcançável por Tab, digitação e edição funcionam, o campo é nomeado pelo label associado por htmlFor, o placeholder não substitui o nome, e aria-invalid com aria-describedby liga a mensagem de erro ao campo. Um campo desabilitado sai da sequência de tabulação e recusa entrada; readOnly permanece focalizável e anunciado. Touch verificado em viewport de 375px com emulação de toque: altura de 36px, acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, e o tamanho do texto permanece em 16px abaixo de md — abaixo disso o iOS aplica zoom no viewport ao focar o campo e não o desfaz. Reduced motion verificado com prefers-reduced-motion: reduce — a transição de cor e sombra do foco 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
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/input.json
Distribuição
Interna

Acessibilidade

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

Dependências

Pacotes
@base-ui/react
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
AutocompleteInput GroupQuestionnaireSidebar