Input · Eyes

Padrão

import { Input } from "@vincisys/eyeson";

export function InputBasicDemo() {
	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input label="Padrão" placeholder="Digite algo..." />
		</div>
	);
}

Instalação

import { Input } from '@vincisys/eyeson';

Uso

import { Input } from '@vincisys/eyeson';

export function Example() {
return (
  <Input
    label="Nome"
    placeholder="Digite seu nome"
  />
);
}

Exemplos

Padrão

Visualizar

import { Input } from "@vincisys/eyeson";

export function InputBasicDemo() {
	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input label="Padrão" placeholder="Digite algo..." />
		</div>
	);
}

Label fora (`labelVariant="outside"`)

O nome do campo fica acima da borda, com placeholder dentro do input.

Número do documento*

Visualizar

import { Input } from "@vincisys/eyeson";

export function InputOutsideDemo() {
	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input
				label="Número do documento"
				placeholder="Número do documento"
				labelVariant="outside"
				required
			/>
		</div>
	);
}

<Input
label="Número do documento"
placeholder="Número do documento"
labelVariant="outside"
required
/>

Controlado

Com valor

Visualizar

import { Input } from "@vincisys/eyeson";
import { useState } from "react";

export function InputControlledDemo() {
	const [value, setValue] = useState('');

	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input
				label="Com valor"
				value={value}
				onChange={(next) => setValue(next)}
			/>
		</div>
	);
}

Inválido

Campo obrigatório

Visualizar

import { Input } from "@vincisys/eyeson";

export function InputInvalidDemo() {
	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input
				label="Inválido"
				state="invalid"
				errorMessage="Campo obrigatório"
			/>
		</div>
	);
}

Telefone

Visualizar

import { Input } from "@vincisys/eyeson";

export function InputPhoneDemo() {
	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input
				label="Telefone"
				format="phone"
				placeholder="(00) 00000-0000"
			/>
		</div>
	);
}

Número (`inputType="number"`)

Decimal brasileiro com vírgula. O campo não usa type="number" nativo (ele rejeita ,). Use o valor como string no estado — não faça Number(value) a cada tecla, senão 1, some.

Exemplos válidos: 1,1, 2222,20, 543,00.

Valor

Visualizar

import { Input } from "@vincisys/eyeson";
import { useState } from "react";

export function InputNumberDemo() {
	const [value, setValue] = useState('');

	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input
				label="Valor"
				inputType="number"
				placeholder="0,00"
				value={value}
				onChange={(next) => setValue(next)}
			/>
		</div>
	);
}

const [value, setValue] = useState('');

<Input
label="Valor"
inputType="number"
placeholder="0,00"
value={value}
onChange={(next) => setValue(next)}
/>

Mascarado (`hideContent`)

Esconde o valor digitado (ex.: senha) e mostra um botão de texto pra revelar/ocultar o conteúdo. Personalize o texto do botão com showContentText/hideContentText (padrão: “Mostrar”/“Ocultar”).

Senha

Visualizar

import { Input } from "@vincisys/eyeson";
import { useState } from "react";

export function InputHideContentDemo() {
	const [value, setValue] = useState('');

	return (
		<div className="flex max-w-md flex-col gap-4">
			<Input
				label="Senha"
				hideContent
				value={value}
				onChange={(next) => setValue(next)}
			/>
		</div>
	);
}

const [value, setValue] = useState('');

<Input
label="Senha"
hideContent
value={value}
onChange={(next) => setValue(next)}
/>