Skip to content

Commit c8597f0

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
Guidance.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent bc8ad6a commit c8597f0

1 file changed

Lines changed: 214 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/radiogroup

‎src/sections/Projects/Sistent/components/radiogroup/guidance.js‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { SistentLayout } from "../../sistent-layout";
5+
import TabButton from "../../../../../reusecore/Button";
6+
import styled from "styled-components";
7+
8+
const TableContainer = styled.div`
9+
width: 100%;
10+
overflow-x: auto;
11+
margin: 0;
12+
padding-left: 1px; /* Fix for left edge cutoff */
13+
14+
table {
15+
margin-left: 4px; /* Extra spacing on left edge */
16+
min-width: 600px; /* Ensures minimum width for better mobile view */
17+
}
18+
19+
th:first-child, td:first-child {
20+
padding-left: 8px; /* Extra padding on first column */
21+
}
22+
`;
23+
24+
const RadioGroupGuidance = () => {
25+
const location = useLocation();
26+
27+
return (
28+
<SistentLayout title="RadioGroup">
29+
<div className="content">
30+
<a id="Identity">
31+
<h2>RadioGroup</h2>
32+
</a>
33+
<p>
34+
The Radio Group allows the user to select one option from a set.
35+
</p>
36+
<div className="filterBtns">
37+
<TabButton
38+
className={
39+
location.pathname === "/projects/sistent/components/radiogroup"
40+
? "active"
41+
: ""
42+
}
43+
onClick={() => navigate("/projects/sistent/components/radiogroup")}
44+
title="Overview"
45+
/>
46+
<TabButton
47+
className={
48+
location.pathname ===
49+
"/projects/sistent/components/radiogroup/guidance"
50+
? "active"
51+
: ""
52+
}
53+
onClick={() =>
54+
navigate("/projects/sistent/components/radiogroup/guidance")
55+
}
56+
title="Guidance"
57+
/>
58+
<TabButton
59+
className={
60+
location.pathname === "/projects/sistent/components/radiogroup/code"
61+
? "active"
62+
: ""
63+
}
64+
onClick={() =>
65+
navigate("/projects/sistent/components/radiogroup/code")
66+
}
67+
title="Code"
68+
/>
69+
</div>
70+
<div className="main-content">
71+
<p>
72+
The RadioGroup component in React is used to present a set of
73+
mutually exclusive options, where only one option can be selected
74+
at a time. It is commonly used in forms and settings.
75+
</p>
76+
<a id="Function">
77+
<h2>Function</h2>
78+
</a>
79+
<p>The RadioGroup component helps achieve the following functions:</p>
80+
<ul>
81+
<li>
82+
<strong>Single Selection:</strong> Ensures that only one option
83+
can be selected at a time, making it ideal for mutually exclusive
84+
choices.
85+
</li>
86+
<li>
87+
<strong>Form Inputs:</strong> Commonly used in forms where users
88+
need to select from predefined options, such as survey questions
89+
or settings.
90+
</li>
91+
<li>
92+
<strong>Custom UI Controls:</strong> Can be styled and customized
93+
to fit different design requirements and themes.
94+
</li>
95+
</ul>
96+
97+
<a id="Props">
98+
<h2>Props</h2>
99+
</a>
100+
<p>
101+
The RadioGroup component accepts the following props to customize its behavior and appearance.
102+
</p>
103+
104+
<TableContainer>
105+
<table>
106+
<thead>
107+
<tr>
108+
<th>Name</th>
109+
<th>Type</th>
110+
<th>Description</th>
111+
</tr>
112+
</thead>
113+
<tbody>
114+
<tr>
115+
<td>
116+
<code>children</code>
117+
</td>
118+
<td>
119+
<code>node</code>
120+
</td>
121+
<td>
122+
The content of the component, typically a set of FormControlLabel elements.
123+
</td>
124+
</tr>
125+
<tr>
126+
<td>
127+
<code>defaultValue</code>
128+
</td>
129+
<td>
130+
<code>any</code>
131+
</td>
132+
<td>The default value. Use when the component is not controlled.</td>
133+
</tr>
134+
<tr>
135+
<td>
136+
<code>name</code>
137+
</td>
138+
<td>
139+
<code>string</code>
140+
</td>
141+
<td>
142+
The name used to reference the value of the control.
143+
If you don't provide this prop, it falls back to a randomly generated name.
144+
</td>
145+
</tr>
146+
<tr>
147+
<td>
148+
<code>onChange</code>
149+
</td>
150+
<td>
151+
<code>func</code>
152+
</td>
153+
<td>
154+
Callback fired when a radio button is selected.
155+
<strong>Signature:</strong>
156+
<code>
157+
{"function(event: React.ChangeEvent, value: string) => void"}
158+
</code>
159+
</td>
160+
</tr>
161+
<tr>
162+
<td>
163+
<code>row</code>
164+
</td>
165+
<td>
166+
<code>bool</code>
167+
</td>
168+
<td>
169+
If <code>true</code>, the radio buttons will be arranged horizontally.
170+
</td>
171+
</tr>
172+
<tr>
173+
<td>
174+
<code>size</code>
175+
</td>
176+
<td>
177+
<code>string</code>
178+
</td>
179+
<td>
180+
The size of the component. One of: <code>'small'</code>, <code>'medium'</code> (default).
181+
</td>
182+
</tr>
183+
<tr>
184+
<td>
185+
<code>value</code>
186+
</td>
187+
<td>
188+
<code>any</code>
189+
</td>
190+
<td>
191+
Value of the selected radio button. The DOM API casts this to a string.
192+
</td>
193+
</tr>
194+
</tbody>
195+
</table>
196+
</TableContainer>
197+
198+
<a id="BestPractices">
199+
<h2>Best Practices</h2>
200+
</a>
201+
<ul>
202+
<li><strong>Single-choice only:</strong> Use RadioGroup when users must select just one option from a set. For multiple selections, use checkboxes instead.</li>
203+
<li><strong>Clear labeling:</strong> Provide short, descriptive labels for each radio option to help users understand their choices quickly.</li>
204+
<li><strong>Logical grouping:</strong> Visually and semantically group related radio options together to improve clarity and accessibility.</li>
205+
<li><strong>Default selection:</strong> Set a sensible default value to guide users and streamline their decision-making process.</li>
206+
<li><strong>Horizontal layout:</strong> Use the <code>row</code> prop for horizontal alignment when space is limited or when options are closely related.</li>
207+
</ul>
208+
</div>
209+
</div>
210+
</SistentLayout>
211+
);
212+
};
213+
214+
export default RadioGroupGuidance;

0 commit comments

Comments
 (0)