import {Select} from "@qinetik/anique";
export default function StaticSelectExample() {
return (
<Select
options={["apple", "banana", "pear", "pineapple", "kiwi"]}
/>
)
}
Select
Examples
Static
Select...
Disabled
Select...
import {Select} from "@qinetik/anique";
export default function DisabledSelectExample() {
return (
<Select
disabled={true}
options={["apple", "banana", "pear", "pineapple", "kiwi"]}
/>
)
}
Reactive
Select...
import {createSignal} from "solid-js";
import {Select} from "@qinetik/anique";
export default function ReactiveExample() {
const optionSets = {
fruit: ["apple", "banana", "pear", "pineapple", "kiwi"],
starwars: ["jedi", "sith", "stormtrooper", "luke", "leia"],
};
const [activeSet, setActiveSet] = createSignal("fruit");
return (
<Select
options={optionSets[activeSet()]}
onChange={() =>
setActiveSet(activeSet() === "fruit" ? "starwars" : "fruit")
}
/>
);
};
Format
Select...
Current value: null
import {createSignal} from "solid-js";
import {Select} from "@qinetik/anique";
export default function FormatExample() {
const options = [
{name: "apple", label: "🍏 Apple"},
{name: "banana", label: "🍌 Banana"},
{name: "pear", label: "🍐 Pear"},
{name: "pineapple", label: "🍍 Pineappe"},
{name: "kiwi", label: "🥝 Kiwi"},
];
const format = (item, type) => (type === "option" ? item.label : item.name);
const [value, setValue] = createSignal(null);
return (
<div class="flex flex-1 flex-col max-w-100 gap-3">
<Select options={options} format={format} onChange={setValue}/>
<div class="text-sm">Current value: {JSON.stringify(value())}</div>
</div>
);
};
Reset
Select...
import {createSignal} from "solid-js";
import {Select} from "@qinetik/anique";
export default function ResetExample() {
const [initialValue, setInitialValue] = createSignal(null, {equals: false});
return (
<>
<Select
initialValue={initialValue()}
options={["apple", "banana", "pear", "pineapple", "kiwi"]}
/>
<button class="primary-button" onClick={() => setInitialValue(null)}>
Reset
</button>
</>
);
};
Async
Select...
import {createAsyncOptions, Select} from "@qinetik/anique";
const fetchData = async (inputValue) => {
return await new Promise((resolve) => {
setTimeout(
() =>
resolve(
["apple", "banana", "pear", "pineapple", "kiwi"].filter((option) =>
option.startsWith(inputValue)
)
),
2000
);
});
};
export default function AsyncFetchExample(){
const props = createAsyncOptions(fetchData);
return <Select {...props} />;
};
Filterable
Select...
import {createOptions, Select} from "@qinetik/anique";
export default function FilterableExample() {
const props = createOptions(["apple", "banana", "pear", "pineapple", "kiwi"]);
return <Select {...props} />;
};
Filterable (Objects)
Select...
import {createOptions, Select} from "@qinetik/anique";
export default function FilterableObjectsExample() {
const props = createOptions(
[
{name: "apple"},
{name: "banana"},
{name: "pear"},
{name: "pineapple"},
{name: "kiwi"},
],
{key: "name"}
);
return <Select {...props} />;
};
Creatable
Select...
import {createOptions, Select} from "@qinetik/anique";
export default function CreateableExample() {
const props = createOptions(
["apple", "banana", "pear", "pineapple", "kiwi"],
{createable: true}
);
return <Select {...props} />;
};
Creatable (Objects)
Select...
import {createOptions, Select} from "@qinetik/anique";
export default function CreateableObjectsExample() {
const props = createOptions(
[
{name: "apple"},
{name: "banana"},
{name: "pear"},
{name: "pineapple"},
{name: "kiwi"},
],
{
key: "name",
createable: true,
}
);
return <Select {...props} />;
};
Multiple
Select...
import {Select} from "@qinetik/anique";
export default function MultipleExample() {
return <Select multiple options={["apple", "banana", "pear", "pineapple", "kiwi"]}/>
}
Multiple Filterable
Select...
import {createOptions, Select} from "@qinetik/anique";
export default function MultipleFilterableExample() {
const props = createOptions(["apple", "banana", "pear", "pineapple", "kiwi"]);
return <Select multiple {...props} />;
};
Multiple Creatable
Select...
import {createOptions, Select} from "@qinetik/anique";
export default function MultipleCreateableExample() {
const props = createOptions(
["apple", "banana", "pear", "pineapple", "kiwi"],
{
createable: true,
}
);
return <Select multiple {...props} />;
};
Disabled Options
Select...
import {Select} from "@qinetik/anique";
export default function DisabledOptionsExample() {
return <Select
options={["apple", "banana", "pear", "pineapple", "kiwi"]}
isOptionDisabled={(option) => option === "pear"}
/>
}
Auto Scroll
Select...
import {Select} from "@qinetik/anique";
export default function AutoScrollExample() {
return <Select options={[...Array(50).keys()]}/>
}
Kitchen Sink
Select...
Quick pick:
import {createSignal, createUniqueId, For} from "solid-js";
import {createOptions, Select} from "@qinetik/anique";
import {Column} from "@qinetik/anique/column";
import {Row} from "@qinetik/anique/row";
import {Button} from "@qinetik/anique/button";
export default function KitchenSinkExample() {
const createValue = (name) => {
return {id: createUniqueId(), name};
};
const candidates = [
createValue("apple"),
createValue("banana"),
createValue("pear"),
createValue("pineapple"),
createValue("kiwi"),
];
const initialValue = [candidates[2]];
const [options, setOptions] = createSignal(candidates);
const [selectedValues, setSelectedValues] = createSignal(initialValue);
const onChange = (selected) => {
setSelectedValues(selected);
const lastValue = selected[selected.length - 1];
if (lastValue && !options().includes(lastValue)) {
setOptions([...options(), lastValue]);
}
};
const props = createOptions(options, {
key: "name",
disable: (value) => selectedValues().includes(value),
filterable: true, // Default
createable: createValue,
});
return (
<Column gap={"0.5em"}>
<Select
multiple
initialValue={selectedValues()}
onChange={onChange}
{...props}
/>
<Row gap={"0.5em"}>
<span>Quick pick:</span>
<For
each={options()
.filter((option) => !selectedValues().includes(option))
.slice(0, 3)}
>
{(option) => (
<Button
onClick={() => setSelectedValues([...selectedValues(), option])}
>
{option.name}
</Button>
)}
</For>
</Row>
</Column>
);
};