Carregando…

Floating Label Input

Inputs

Text input where the label floats above the field when focused or filled.

🚧

Demo coming soon

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

Instalação via CLI

$ npx kikitocn add floating-label-input

Exemplo de uso

Floating Label InputExample.tsx

import { FloatingLabelInput } from "@/components/ui/cn/floating-label-input/FloatingLabelInput";

export function FloatingLabelInputExample() {
  return (
    <FloatingLabelInput />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`label*`	`string`	—	Label flutuante
`value`	`string`	—	Valor controlado
`defaultValue`	`string`	—	Valor inicial
`onChange`	`React.ChangeEventHandler<HTMLInputElement>`	—	Callback ao alterar
`variant`	`'outline' \| 'filled' \| 'underline'`	`'outline'`	Estilo do campo
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do campo
`invalid`	`boolean`	`false`	Estado de erro
`hint`	`string`	—	Texto auxiliar
`errorMessage`	`string`	—	Mensagem de erro
`disabled`	`boolean`	`false`	Desabilitar campo
`className`	`string`	—	Classes CSS extras

Voltar para Inputs

Carregando…