Select
@vincisys/eyeson

Select

Lista suspensa para escolha de uma opção entre várias.
Visualizar 
import { Select } from "@vincisys/eyeson";

export function SelectBasicDemo() {
	return (
		<div className="max-w-md">
			<Select
				label="Fruta"
				items={fruits}
				placeholder="Selecione uma fruta"
			/>
		</div>
	);
}

Instalação

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

Uso

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

const items = [
{ label: 'Maçã', value: 'apple' },
{ label: 'Banana', value: 'banana' },
];

export function Example() {
return (
  <Select
    label="Fruta"
    items={items}
    placeholder="Selecione"
  />
);
}

Exemplos

Básico
Visualizar 
import { Select } from "@vincisys/eyeson";

export function SelectBasicDemo() {
	return (
		<div className="max-w-md">
			<Select
				label="Fruta"
				items={fruits}
				placeholder="Selecione uma fruta"
			/>
		</div>
	);
}

Label fora (labelVariant="outside")
Visualizar 
import { Select } from "@vincisys/eyeson";

export function SelectOutsideDemo() {
	return (
		<div className="max-w-md">
			<Select
				label="Tipo de documento"
				items={fruits}
				placeholder="Selecione uma opção"
				labelVariant="outside"
				required
			/>
		</div>
	);
}

Controlado
Visualizar 
import { Select, SelectOption } from "@vincisys/eyeson";
import { useState } from "react";

export function SelectControlledDemo() {
	const [value, setValue] = useState<SelectOption | null>(null);

	return (
		<div className="max-w-md">
			<Select
				label="Controlado"
				items={fruits}
				value={value}
				onValueChange={setValue}
				placeholder="Selecione uma fruta"
			/>
		</div>
	);
}