Add Radio component for radio input functionality
This commit is contained in:
25
src/components/Radio.js
Normal file
25
src/components/Radio.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
/** RADIO */
|
||||||
|
export const Radio = (props) => {
|
||||||
|
const { label, tooltip, value, ...rest } = props;
|
||||||
|
|
||||||
|
const radioEl = $html("input", {
|
||||||
|
...rest,
|
||||||
|
type: "radio",
|
||||||
|
class: joinClass("radio", props.class),
|
||||||
|
checked: () => val(value) === props.value,
|
||||||
|
disabled: () => val(props.disabled),
|
||||||
|
onclick: () => typeof value === "function" && value(props.value),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!label && !tooltip) return radioEl;
|
||||||
|
|
||||||
|
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||||
|
radioEl,
|
||||||
|
label ? $html("span", { class: "label-text" }, label) : null,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user