Add Select component for dropdown selection

Implement a Select component with label and options.
This commit is contained in:
Natxo
2026-03-31 12:11:57 +02:00
committed by GitHub
parent 51d1bb7c84
commit cefeae4a8b

36
src/components/Select.js Normal file
View File

@@ -0,0 +1,36 @@
import { $html, $for } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** SELECT */
export const Select = (props) => {
const { label, options, value, ...rest } = props;
const selectEl = $html(
"select",
{
...rest,
class: joinClass("select select-bordered w-full", props.class),
value: value
},
$for(
() => val(options) || [],
(opt) =>
$html(
"option",
{
value: opt.value,
$selected: () => String(val(value)) === String(opt.value),
},
opt.label,
),
(opt) => opt.value,
),
);
if (!label) return selectEl;
return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
$html("span", {}, label),
selectEl
]);
};