Skip to content

Commit 752204f

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
authored
Merge branch 'master' into remove-react-loadable
2 parents 8edec7e + eda71a8 commit 752204f

3 files changed

Lines changed: 357 additions & 0 deletions

File tree

‎src/collections/sistent/components/formgroup/code.mdx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
title: Form Group Code
3+
component: formgroup
4+
description: FormGroup is a wrapper component used to group multiple form controls such as checkboxes or switches together, providing consistent spacing and layout.
5+
---
6+
7+
import { useState } from "react";
8+
import { FormGroup, FormControlLabel, FormControl, FormLabel, Checkbox, Switch } from "@sistent/sistent";
9+
10+
export const BasicFormGroupCodeDemo = () => {
11+
const [state, setState] = useState({
12+
option1: false,
13+
option2: true,
14+
});
15+
const handleChange = (event) => {
16+
setState({ ...state, [event.target.name]: event.target.checked });
17+
};
18+
return (
19+
<FormGroup>
20+
<FormControlLabel
21+
control={<Checkbox checked={state.option1} onChange={handleChange} name="option1" />}
22+
label="Option One"
23+
/>
24+
<FormControlLabel
25+
control={<Checkbox checked={state.option2} onChange={handleChange} name="option2" />}
26+
label="Option Two"
27+
/>
28+
</FormGroup>
29+
);
30+
};
31+
32+
export const RowFormGroupCodeDemo = () => {
33+
return (
34+
<FormGroup row>
35+
<FormControlLabel control={<Checkbox defaultChecked />} label="Option A" />
36+
<FormControlLabel control={<Checkbox />} label="Option B" />
37+
<FormControlLabel control={<Checkbox />} label="Option C" />
38+
</FormGroup>
39+
);
40+
};
41+
42+
export const SwitchFormGroupCodeDemo = () => {
43+
return (
44+
<FormGroup>
45+
<FormControlLabel control={<Switch defaultChecked />} label="Email Notifications" />
46+
<FormControlLabel control={<Switch />} label="Push Notifications" />
47+
<FormControlLabel control={<Switch />} label="SMS Notifications" />
48+
</FormGroup>
49+
);
50+
};
51+
52+
export const AccessibleFormGroupCodeDemo = () => {
53+
return (
54+
<FormControl component="fieldset">
55+
<FormLabel component="legend">Select Preferences</FormLabel>
56+
<FormGroup>
57+
<FormControlLabel control={<Checkbox defaultChecked />} label="Option A" />
58+
<FormControlLabel control={<Checkbox />} label="Option B" />
59+
<FormControlLabel control={<Checkbox />} label="Option C" />
60+
</FormGroup>
61+
</FormControl>
62+
);
63+
};
64+
65+
<a id="Basic-Usage">
66+
<h2>Basic Usage</h2>
67+
</a>
68+
69+
The most common use case for FormGroup is grouping checkboxes together with labels.
70+
71+
<div className="showcase">
72+
<div className="items">
73+
<ThemeWrapper>
74+
<BasicFormGroupCodeDemo />
75+
</ThemeWrapper>
76+
</div>
77+
<CodeBlock name="basic-form-group" collapsible code={`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
78+
<FormGroup>
79+
<FormControlLabel control={<Checkbox />} label="Option One" />
80+
<FormControlLabel control={<Checkbox defaultChecked />} label="Option Two" />
81+
</FormGroup>
82+
</SistentThemeProvider>`} />
83+
</div>
84+
85+
<a id="Row-Layout">
86+
<h2>Row Layout</h2>
87+
</a>
88+
89+
Use the <code>row</code> prop to display form controls horizontally.
90+
91+
<div className="showcase">
92+
<div className="items">
93+
<ThemeWrapper>
94+
<RowFormGroupCodeDemo />
95+
</ThemeWrapper>
96+
</div>
97+
<CodeBlock name="row-form-group" collapsible code={`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
98+
<FormGroup row>
99+
<FormControlLabel control={<Checkbox defaultChecked />} label="Option A" />
100+
<FormControlLabel control={<Checkbox />} label="Option B" />
101+
<FormControlLabel control={<Checkbox />} label="Option C" />
102+
</FormGroup>
103+
</SistentThemeProvider>`} />
104+
</div>
105+
106+
<a id="With-Switches">
107+
<h2>With Switches</h2>
108+
</a>
109+
110+
FormGroup works seamlessly with Switch components for toggle-based settings.
111+
112+
<div className="showcase">
113+
<div className="items">
114+
<ThemeWrapper>
115+
<SwitchFormGroupCodeDemo />
116+
</ThemeWrapper>
117+
</div>
118+
<CodeBlock name="switch-form-group" collapsible code={`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
119+
<FormGroup>
120+
<FormControlLabel control={<Switch defaultChecked />} label="Email Notifications" />
121+
<FormControlLabel control={<Switch />} label="Push Notifications" />
122+
<FormControlLabel control={<Switch />} label="SMS Notifications" />
123+
</FormGroup>
124+
</SistentThemeProvider>`} />
125+
</div>
126+
127+
<a id="Accessible-Group">
128+
<h2>Accessible Group</h2>
129+
</a>
130+
131+
Wrap FormGroup inside a <code>FormControl</code> with a <code>FormLabel</code> for full accessibility support.
132+
133+
<div className="showcase">
134+
<div className="items">
135+
<ThemeWrapper>
136+
<AccessibleFormGroupCodeDemo />
137+
</ThemeWrapper>
138+
</div>
139+
<CodeBlock name="accessible-form-group" collapsible code={`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
140+
<FormControl component="fieldset">
141+
<FormLabel component="legend">Select Preferences</FormLabel>
142+
<FormGroup>
143+
<FormControlLabel control={<Checkbox defaultChecked />} label="Option A" />
144+
<FormControlLabel control={<Checkbox />} label="Option B" />
145+
<FormControlLabel control={<Checkbox />} label="Option C" />
146+
</FormGroup>
147+
</FormControl>
148+
</SistentThemeProvider>`} />
149+
</div>

‎src/collections/sistent/components/formgroup/guidance.mdx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
title: Form Group Guidance
3+
component: formgroup
4+
description: FormGroup is a wrapper component used to group multiple form controls such as checkboxes or switches together, providing consistent spacing and layout.
5+
---
6+
7+
import { FormGroup, FormControlLabel, FormControl, FormLabel, Checkbox, Switch, Box } from "@sistent/sistent";
8+
9+
export const VerticalFormGroupDemo = () => {
10+
return (
11+
<Box sx={{ display: "flex", justifyContent: "center" }}>
12+
<FormControl component="fieldset">
13+
<FormLabel component="legend">Vertical Group</FormLabel>
14+
<FormGroup>
15+
<FormControlLabel control={<Checkbox defaultChecked />} label="Option A" />
16+
<FormControlLabel control={<Checkbox />} label="Option B" />
17+
<FormControlLabel control={<Checkbox />} label="Option C" />
18+
</FormGroup>
19+
</FormControl>
20+
</Box>
21+
);
22+
};
23+
24+
export const HorizontalFormGroupDemo = () => {
25+
return (
26+
<Box sx={{ display: "flex", justifyContent: "center" }}>
27+
<FormControl component="fieldset">
28+
<FormLabel component="legend">Horizontal Group</FormLabel>
29+
<FormGroup row>
30+
<FormControlLabel control={<Checkbox defaultChecked />} label="Option A" />
31+
<FormControlLabel control={<Checkbox />} label="Option B" />
32+
<FormControlLabel control={<Checkbox />} label="Option C" />
33+
</FormGroup>
34+
</FormControl>
35+
</Box>
36+
);
37+
};
38+
39+
export const SwitchFormGroupDemo = () => {
40+
return (
41+
<Box sx={{ display: "flex", justifyContent: "center" }}>
42+
<FormControl component="fieldset">
43+
<FormLabel component="legend">Notifications</FormLabel>
44+
<FormGroup>
45+
<FormControlLabel control={<Switch defaultChecked />} label="Email Notifications" />
46+
<FormControlLabel control={<Switch />} label="Push Notifications" />
47+
<FormControlLabel control={<Switch />} label="SMS Notifications" />
48+
</FormGroup>
49+
</FormControl>
50+
</Box>
51+
);
52+
};
53+
54+
<a id="Functions">
55+
<h2>Functions</h2>
56+
</a>
57+
58+
<p>
59+
The FormGroup component provides a structured way to group related form controls
60+
together. It ensures consistent spacing, alignment, and layout for multiple
61+
checkboxes or switches in a form.
62+
</p>
63+
64+
<h3>Vertical Layout</h3>
65+
<p>
66+
By default, FormGroup stacks its children vertically, which is ideal for longer
67+
lists of options where each item needs its own line for clarity.
68+
</p>
69+
70+
<Row $Hcenter className="image-container">
71+
<ThemeWrapper>
72+
<VerticalFormGroupDemo />
73+
</ThemeWrapper>
74+
</Row>
75+
76+
<h3>Horizontal Layout</h3>
77+
<p>
78+
Use the <code>row</code> prop to arrange form controls horizontally. This is
79+
useful when options are short and can fit side by side without crowding.
80+
</p>
81+
82+
<Row $Hcenter className="image-container">
83+
<ThemeWrapper>
84+
<HorizontalFormGroupDemo />
85+
</ThemeWrapper>
86+
</Row>
87+
88+
<h3>With Switches</h3>
89+
<p>
90+
FormGroup works equally well with Switch components, making it ideal for
91+
settings panels and preference toggles.
92+
</p>
93+
94+
<Row $Hcenter className="image-container">
95+
<ThemeWrapper>
96+
<SwitchFormGroupDemo />
97+
</ThemeWrapper>
98+
</Row>
99+
100+
<a id="Best-Practices">
101+
<h2>Best Practices</h2>
102+
</a>
103+
104+
<h3>When to Use FormGroup</h3>
105+
<ul>
106+
<li>Use when grouping two or more related checkboxes or switches</li>
107+
<li>Wrap inside a <code>FormControl</code> with a <code>FormLabel</code> for proper accessibility</li>
108+
<li>Use <code>row</code> prop for short option labels that fit horizontally</li>
109+
<li>Prefer vertical layout for longer labels or more than four options</li>
110+
</ul>
111+
112+
<h3>Common Patterns</h3>
113+
<ul>
114+
<li>Always pair with <code>FormControlLabel</code> to provide descriptive labels</li>
115+
<li>Use <code>FormLabel</code> as a group heading for screen reader support</li>
116+
<li>Keep option labels concise and scannable</li>
117+
<li>Use consistent control types within a single FormGroup (all checkboxes or all switches)</li>
118+
</ul>
119+
120+
<h3>Accessibility</h3>
121+
<ul>
122+
<li>Wrap FormGroup in a <code>FormControl</code> with <code>component="fieldset"</code></li>
123+
<li>Always include a <code>FormLabel</code> with <code>component="legend"</code> for screen readers</li>
124+
<li>Ensure each control has a descriptive label via <code>FormControlLabel</code></li>
125+
<li>Supports full keyboard navigation out of the box</li>
126+
</ul>
127+
128+
<a id="Customization">
129+
<h2>Customization</h2>
130+
</a>
131+
132+
<p>
133+
FormGroup can be customized through props and styling to match your design requirements.
134+
</p>
135+
136+
<h3>Props</h3>
137+
<ul>
138+
<li><code>children</code>: The form controls to be grouped (e.g., FormControlLabel with Checkbox or Switch)</li>
139+
<li><code>row</code>: If <code>true</code>, the group is displayed in a horizontal row instead of a column</li>
140+
<li><code>sx</code>: Custom styling using the theme system</li>
141+
<li><code>classes</code>: Override or extend the styles applied to the component</li>
142+
</ul>

‎src/collections/sistent/components/formgroup/index.mdx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
name: "Form Group"
3+
title: Form Group
4+
published: true
5+
component: formgroup
6+
description: FormGroup is a wrapper component used to group multiple form controls such as checkboxes or switches together, providing consistent spacing and layout.
7+
---
8+
9+
import { useState } from "react";
10+
import { FormGroup, FormControlLabel, Checkbox } from "@sistent/sistent";
11+
12+
export const BasicFormGroupDemo = () => {
13+
const [state, setState] = useState({
14+
option1: false,
15+
option2: true,
16+
});
17+
18+
const handleChange = (event) => {
19+
setState({ ...state, [event.target.name]: event.target.checked});
20+
};
21+
22+
return (
23+
<div style={{ display: "flex", justifyContent: "center" }}>
24+
<FormGroup>
25+
<FormControlLabel
26+
control={<Checkbox checked={state.option1} onChange={handleChange} name="option1" />}
27+
label="Option One"
28+
/>
29+
<FormControlLabel
30+
control={<Checkbox checked={state.option2} onChange={handleChange} name="option2" />}
31+
label="Option Two"
32+
/>
33+
</FormGroup>
34+
</div>
35+
);
36+
};
37+
38+
<a id="Usage">
39+
<h2>Usage</h2>
40+
</a>
41+
42+
The `FormGroup` component is a wrapper used to group form controls like checkboxes and switches together. It provides consistent vertical or horizontal layout and spacing for multiple related form inputs.
43+
44+
It is commonly used alongside `FormControlLabel` to pair each control with a descriptive label.
45+
46+
<a id="Example">
47+
<h2>Example</h2>
48+
</a>
49+
50+
<Row $Hcenter className="image-container">
51+
<ThemeWrapper>
52+
<BasicFormGroupDemo />
53+
</ThemeWrapper>
54+
</Row>
55+
56+
<a id="Accessibility">
57+
<h2>Accessibility</h2>
58+
</a>
59+
60+
FormGroup works best when wrapped inside a `FormControl` with a `FormLabel` to provide a group label for screen readers. This ensures assistive technologies can correctly identify and describe the group of related controls.
61+
62+
<a id="Further">
63+
<h2>Learn More</h2>
64+
</a>
65+
66+
Visit the **Guidance** tab for best practices and the **Code** tab for implementation details.

0 commit comments

Comments
 (0)