import {Radio} from "@qinetik/anique/radio";
export default function BasicRadioExample() {
return (
<Radio
type={"radio"}
/>
)
}
Basic Radio
Size Variations
This is a small checkbox
This is a medium checkbox
This is a large checkbox
import {createSignal} from "solid-js";
import {Row} from "@qinetik/anique/row";
import {LabeledRadio} from "@qinetik/anique/radio";
import {Size} from "@qinetik/anique/theme";
export default function SizeVariationsExample() {
const [isChecked, setIsChecked] = createSignal(false)
return (
<Row alignment={"center"} gap={"1em"}>
<LabeledRadio
isChecked={isChecked}
onChange={setIsChecked}
label={"This is a small checkbox"}
size={Size.Small}
/>
<LabeledRadio
isChecked={isChecked}
onChange={setIsChecked}
label={"This is a medium checkbox"}
size={Size.Medium}
/>
<LabeledRadio
isChecked={isChecked}
onChange={setIsChecked}
label={"This is a large checkbox"}
size={Size.Large}
/>
</Row>
)
}
Radio with Label & Description
Terms & Services
Terms & ServicesI agree to terms & services of this company
import {createSignal} from "solid-js";
import {Row} from "@qinetik/anique/row";
import {LabeledRadio} from "@qinetik/anique/radio";
export default function RadioLabelDescriptionExample() {
const [isChecked, setIsChecked] = createSignal(false)
return (
<Row gap={"1em"}>
<LabeledRadio
isChecked={isChecked}
onChange={setIsChecked}
label={"Terms & Services"}
/>
<LabeledRadio
isChecked={isChecked}
onChange={setIsChecked}
label={"Terms & Services"}
description={"I agree to terms & services of this company"}
/>
</Row>
)
}
Disabled Radio
Disabled RadioYou must not be able to check me
import {createSignal} from "solid-js";
import {LabeledRadio} from "@qinetik/anique/radio";
export default function DisabledRadioExample() {
const [isChecked, setIsChecked] = createSignal(true)
return (
<LabeledRadio
isChecked={isChecked}
onChange={setIsChecked}
label={"Disabled Radio"}
disabled={true}
description={"You must not be able to check me"}
/>
)
}