Carregando…

Input

Inputs

Primitive text input with 3 variants, 3 sizes, status states, icons, prefix/suffix and password/search/number/currency/phone/floating-label modes.

UnificadosPassword Input Search Input Number Input Currency Input Phone Input Floating Label Input

Password Input

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/password-input

Search Input

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/search-input

Number Input

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/number-input

Currency Input

Unificado

Phone Input

Unificado

Floating Label Input

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/floating-label-input

Instalação via CLI

$ npx kikitocn add input

Interno:

@/lib/utils

Exemplo de uso

InputExample.tsx

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

export function InputExample() {
  return (
    <div className="flex flex-col gap-4 max-w-sm">
      <Input
        label="E-mail"
        type="email"
        placeholder="voce@exemplo.com"
      />
      <Input
        label="Senha"
        type="password"
        placeholder="••••••••"
        hint="Mínimo 8 caracteres"
      />
      <Input
        label="Usuário"
        defaultValue="jottaennie"
        state="success"
        hint="Nome disponível"
      />
    </div>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`type`	`'number' \| 'currency' \| 'phone' \| HTMLInputType`	`'text'`	Discriminador de modo: 'number' (stepper ±), 'currency' (símbolo + locale), 'phone' (seletor de país + máscara) ou qualquer tipo HTML nativo (text, password, search…). Nos modos number/currency, value/onChange operam com number.
`floatingLabel`	`boolean`	`false`	Renderiza label flutuante que anima acima do campo no foco/preenchimento
`min`	`number`	`undefined`	type='number'\|'currency': valor mínimo
`max`	`number`	`undefined`	type='number'\|'currency': valor máximo
`step`	`number`	`1 (number) \| 0.01 (currency)`	type='number'\|'currency': incremento do passo
`precision`	`number`	`0`	type='number': casas decimais ao arredondar
`allowDecimal`	`boolean`	`false`	type='number': permite entrada decimal (inputMode)
`currency`	`string`	`'USD'`	type='currency': código ISO da moeda (ex: 'BRL')
`locale`	`string`	`'en-US'`	type='currency': locale usado na formatação
`defaultCountry`	`string`	`'BR'`	type='phone': país inicial do seletor de DDI
`variant`	`'outline' \| 'filled' \| 'flushed' \| 'ghost'`	`'outline'`	Estilo visual do input
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do input
`status`	`'default' \| 'error' \| 'success' \| 'warning'`	`'default'`	Estado visual de validação
`label`	`string`	`undefined`	Label acima do input
`hint`	`string`	`undefined`	Texto de apoio abaixo do input
`error`	`string`	`undefined`	Mensagem de erro (força status=error)
`successText`	`string`	`undefined`	Mensagem exibida no estado success
`warningText`	`string`	`undefined`	Mensagem exibida no estado warning
`iconLeft`	`ReactNode`	`undefined`	Ícone exibido à esquerda
`iconRight`	`ReactNode`	`undefined`	Ícone exibido à direita
`prefix`	`string`	`undefined`	Texto prefixo (ex: '$')
`suffix`	`string`	`undefined`	Texto sufixo (ex: 'kg')
`fullWidth`	`boolean`	`false`	Expande para 100% da largura do container
`clearable`	`boolean`	`false`	Exibe botão × para limpar o valor
`onClear`	`() => void`	`undefined`	Callback chamado ao limpar o input
`revealable`	`boolean`	`false`	Para type=password: toggle show/hide

Voltar para Inputs

Carregando…

import { Input } from "@/components/ui/cn/input/Input"; export function InputExample() { return ( <div className="flex flex-col gap-4 max-w-sm"> <Input label="E-mail" type="email" placeholder="voce@exemplo.com" /> <Input label="Senha" type="password" placeholder="••••••••" hint="Mínimo 8 caracteres" /> <Input label="Usuário" defaultValue="jottaennie" state="success" hint="Nome disponível" /> </div> ); }

Prop

Tipo

Padrão

Descrição

type

'number' | 'currency' | 'phone' | HTMLInputType

'text'

Discriminador de modo: 'number' (stepper ±), 'currency' (símbolo + locale), 'phone' (seletor de país + máscara) ou qualquer tipo HTML nativo (text, password, search…). Nos modos number/currency, value/onChange operam com number.

floatingLabel

boolean

false

Renderiza label flutuante que anima acima do campo no foco/preenchimento

min

number

undefined

type='number'|'currency': valor mínimo

max

number

undefined

type='number'|'currency': valor máximo

step

number

1 (number) | 0.01 (currency)

type='number'|'currency': incremento do passo

precision

number

0

type='number': casas decimais ao arredondar

allowDecimal

boolean

false

type='number': permite entrada decimal (inputMode)

currency

string

'USD'

type='currency': código ISO da moeda (ex: 'BRL')

locale

string

'en-US'

type='currency': locale usado na formatação

defaultCountry

string

'BR'

type='phone': país inicial do seletor de DDI

variant

'outline' | 'filled' | 'flushed' | 'ghost'

'outline'

Estilo visual do input

size

'sm' | 'md' | 'lg'

'md'

Tamanho do input

status

'default' | 'error' | 'success' | 'warning'

'default'

Estado visual de validação

label

string

undefined

Label acima do input

hint

string

undefined

Texto de apoio abaixo do input

error

string

undefined

Mensagem de erro (força status=error)

successText

string

undefined

Mensagem exibida no estado success

warningText

string

undefined

Mensagem exibida no estado warning

iconLeft

ReactNode

undefined

Ícone exibido à esquerda

iconRight

ReactNode

undefined

Ícone exibido à direita

prefix

string

undefined

Texto prefixo (ex: '$')

suffix

string

undefined

Texto sufixo (ex: 'kg')

fullWidth

boolean

false

Expande para 100% da largura do container

clearable

boolean

false

Exibe botão × para limpar o valor

onClear

() => void

undefined

Callback chamado ao limpar o input

revealable

boolean

false

Para type=password: toggle show/hide

Input

Password Input

Search Input

Number Input

Currency Input

Phone Input

Floating Label Input

Input

Variants

Sizes

Status States

Icons

Prefix / Suffix

Character Count

States

Password Input

Search Input

Number Input

Currency Input

Phone Input

Floating Label Input

Variants

Sizes

Status States

Icons

Prefix / Suffix

Character Count

States