import {Card} from "@qinetik/anique/card";
import {Checkbox} from "@qinetik/anique/checkbox";
export default function BasicCheckboxExample() {
return (
<Card>
<Checkbox
type={"checkbox"}
/>
</Card>
)
}
Basic Checkbox
Size Variations
This is a small checkbox
This is a medium checkbox
This is a large checkbox
import {createSignal} from "solid-js";
import {Card} from "@qinetik/anique/card";
import {Row} from "@qinetik/anique/row";
import {LabeledCheckbox} from "@qinetik/anique/checkbox";
import {Size} from "@qinetik/anique/theme";
export default function SizeVariationsExample() {
const [isChecked, setIsChecked] = createSignal(false)
return (
<Card>
<Row alignment={"center"} gap={"1em"}>
<LabeledCheckbox
isChecked={isChecked}
onChange={setIsChecked}
label={"This is a small checkbox"}
size={Size.Small}
/>
<LabeledCheckbox
isChecked={isChecked}
onChange={setIsChecked}
label={"This is a medium checkbox"}
size={Size.Medium}
/>
<LabeledCheckbox
isChecked={isChecked}
onChange={setIsChecked}
label={"This is a large checkbox"}
size={Size.Large}
/>
</Row>
</Card>
)
}
Checkbox with Label & Description
Terms & Services
Terms & ServicesI agree to terms & services of this company
import {createSignal} from "solid-js";
import {Card} from "@qinetik/anique/card";
import {Row} from "@qinetik/anique/row";
import {LabeledCheckbox} from "@qinetik/anique/checkbox";
export default function CheckboxLabelDescriptionExample() {
const [isChecked, setIsChecked] = createSignal(false)
return (
<Card>
<Row gap={"2em"}>
<LabeledCheckbox
isChecked={isChecked}
onChange={setIsChecked}
label={"Terms & Services"}
/>
<LabeledCheckbox
isChecked={isChecked}
onChange={setIsChecked}
label={"Terms & Services"}
description={"I agree to terms & services of this company"}
/>
</Row>
</Card>
)
}
Disabled Checkbox
Terms & ServicesI agree to terms & services of this company
import {createSignal} from "solid-js";
import {Card} from "@qinetik/anique/card";
import {LabeledCheckbox} from "@qinetik/anique/checkbox";
export default function DisabledCheckboxExample() {
const [isChecked, setIsChecked] = createSignal(false)
return (
<Card>
<LabeledCheckbox
isChecked={isChecked}
onChange={setIsChecked}
label={"Terms & Services"}
disabled={true}
description={"I agree to terms & services of this company"}
/>
</Card>
)
}