Negocios

Input

Campo de texto para formulários. Suporta todos os tipos HTML, estados de foco, erro e desabilitado.

Visão geral

O Input é o campo de texto base do design system. Use sempre dentro de Field para label e erro.

Estados básicos

Import

import { Input } from "@/components/ui/input"

Com Field

Use sempre o componente Field para adicionar label, descrição e erro ao Input.

Use seu e-mail corporativo.

Padrão de implementação

Snippets para os contextos mais comuns do Input.

Input com Field

import { Input } from "@/components/ui/input"
import { Field } from "@/components/field"

<Field label="E-mail" htmlFor="email" required>
  <Input id="email" type="email" placeholder="nome@empresa.com" />
</Field>

Input com erro

<Field label="Senha" htmlFor="senha" error="Senha incorreta.">
  <Input
    id="senha"
    type="password"
    aria-invalid  // ativa o visual de erro
  />
</Field>

Input controlado

"use client"
import { useState } from "react"

export function InputDemo() {
  const [value, setValue] = useState("")

  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Digite aqui..."
    />
  )
}

Props e uso

O Input aceita todas as props nativas do elemento input HTML.

Props principais

type

string

Tipo HTML: text, email, password, number, date, search, file, url, tel.

placeholder

string

Texto de placeholder.

disabled

boolean

Desabilita o campo.

aria-invalid

boolean | 'true'

Ativa o visual de erro e o ring vermelho.

value

string

Valor controlado.

onChange

(e: ChangeEvent) => void

Callback de mudança.

Acessibilidade

Sempre use dentro de Field com label e htmlFor correspondente ao id do input.

O foco visível via focus-visible:ring já está incluso.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter