CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Created checkbox group component

Browse Source
This commit is contained in:
adilallo
2026-02-04 13:34:22 -07:00
parent 05e403e3c6
commit 87a1e1d2a8
6 changed files with 410 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components-preview/page.tsx
+61 -5
View File
@@ -3,6 +3,7 @@
import { useState } from "react";
import TextInput from "../components/TextInput";
import Checkbox from "../components/Checkbox";
import CheckboxGroup from "../components/CheckboxGroup";
import RadioGroup from "../components/RadioGroup";
export default function ComponentsPreview() {
@@ -11,6 +12,7 @@ export default function ComponentsPreview() {
const [errorInputValue, setErrorInputValue] = useState("");
const [standardCheckbox, setStandardCheckbox] = useState(false);
const [inverseCheckbox, setInverseCheckbox] = useState(false);
const [checkboxGroupValues, setCheckboxGroupValues] = useState<string[]>([]);
const [radioValue, setRadioValue] = useState("");
return (
@@ -108,11 +110,65 @@ export default function ComponentsPreview() {
</div>
</section>
{/* Radio Group Section */}
<section className="space-y-[var(--spacing-scale-024)]">
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
Radio Group Component
</h2>
{/* Checkbox Group Section */}
<section className="space-y-[var(--spacing-scale-024)]">
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
Checkbox Group Component
</h2>
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
<div className="space-y-[var(--spacing-scale-016)]">
<div>
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
Standard Mode
</h3>
<div className="space-y-[var(--spacing-scale-016)]">
<CheckboxGroup
name="standard-checkbox-group"
value={checkboxGroupValues}
onChange={({ value }) => setCheckboxGroupValues(value)}
mode="standard"
options={[
{ value: "option1", label: "Checkbox label" },
{
value: "option2",
label: "Checkbox label",
subtext: "Nunc sed hendrerit consequat.",
},
]}
/>
</div>
</div>
<div>
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
Inverse Mode
</h3>
<div className="space-y-[var(--spacing-scale-016)]">
<CheckboxGroup
name="inverse-checkbox-group"
value={checkboxGroupValues}
onChange={({ value }) => setCheckboxGroupValues(value)}
mode="inverse"
options={[
{ value: "option3", label: "Checkbox label" },
{
value: "option4",
label: "Checkbox label",
subtext: "Nunc sed hendrerit consequat.",
},
]}
/>
</div>
</div>
</div>
</div>
</section>
{/* Radio Group Section */}
<section className="space-y-[var(--spacing-scale-024)]">
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
Radio Group Component
</h2>
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
<div className="space-y-[var(--spacing-scale-016)]">