Combobox
@vincisys/eyeson

Combobox

Seleção com busca, itens customizados e estado controlado.

Fruta
Visualizar 
import { Combobox } from "@vincisys/eyeson";

export function ComboboxBasicDemo() {
	return (
		<div className="max-w-md">
			<Combobox
				label="Fruta"
				items={fruits}
				placeholder="Selecione uma fruta"
				getItemLabel={(item) => item.label}
				getItemValue={(item) => item.value}
			/>
		</div>
	);
}

Instalação

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

Uso

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

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

export function Example() {
return (
  <Combobox
    label="Fruta"
    items={items}
    placeholder="Selecione"
    getItemLabel={(item) => item.label}
    getItemValue={(item) => item.value}
  />
);
}

Exemplos

Básico

Fruta
Visualizar 
import { Combobox } from "@vincisys/eyeson";

export function ComboboxBasicDemo() {
	return (
		<div className="max-w-md">
			<Combobox
				label="Fruta"
				items={fruits}
				placeholder="Selecione uma fruta"
				getItemLabel={(item) => item.label}
				getItemValue={(item) => item.value}
			/>
		</div>
	);
}

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

export function ComboboxOutsideDemo() {
	return (
		<div className="max-w-md">
			<Combobox
				label="Contato"
				items={fruits}
				placeholder="Selecione um contato"
				labelVariant="outside"
				required
				getItemLabel={(item) => item.label}
				getItemValue={(item) => item.value}
			/>
		</div>
	);
}

Controlado

Controlado
Nenhuma seleção
Visualizar 
import { Combobox, ComboboxOption } from "@vincisys/eyeson";
import { useState } from "react";

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

	return (
		<div className="max-w-md">
			<Combobox
				label="Controlado"
				items={fruits}
				value={value}
				onValueChange={setValue}
				placeholder="Selecione uma fruta"
				supportingText={
					value ? `Selecionado: ${value.label}` : 'Nenhuma seleção'
				}
				getItemLabel={(item) => item.label}
				getItemValue={(item) => item.value}
			/>
		</div>
	);
}

Seleção múltipla (multiple)

Com multiple, os itens selecionados aparecem como chips removíveis dentro do campo. value, defaultValue e onValueChange passam a trabalhar com arrays.

1 selecionada(s)
Visualizar 
import { Combobox, ComboboxOption } from "@vincisys/eyeson";
import { useState } from "react";

export function ComboboxMultipleDemo() {
	const [value, setValue] = useState<ComboboxOption[]>([fruits[0]]);

	return (
		<div className="max-w-md">
			<Combobox<ComboboxOption, true>
				multiple
				fluid
				label="Frutas"
				items={fruits}
				value={value}
				onValueChange={setValue}
				placeholder="Selecione uma ou mais frutas"
				supportingText={`${value.length} selecionada(s)`}
				getItemLabel={(item) => item.label}
				getItemValue={(item) => item.value}
			/>
		</div>
	);
}
import { Combobox, type ComboboxOption } from '@vincisys/eyeson';
import { useState } from 'react';

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

export function Example() {
const [value, setValue] = useState<ComboboxOption[]>([]);

return (

<Combobox
multiple
label="Frutas"
items={items}
value={value}
onValueChange={setValue}
placeholder="Selecione uma ou mais frutas"
getItemLabel={(item) => item.label}
getItemValue={(item) => item.value}
/>
);
}