Skip to content

Commit dcef138

Browse files
saurabhraghuvanshiisaurabhraghuvanshii
authored
Merge pull request #7627 from Bharath314/formcontrol-docs
[Sistent] Add `FormControl` doc page
2 parents eb51889 + 363bb05 commit dcef138

File tree

3 files changed

+539
-0
lines changed

3 files changed

+539
-0
lines changed

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

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
---
2+
title: Form Control Code
3+
component: formcontrol
4+
description: FormControl provides context such as filled/focused/error/required for form inputs. It's a fundamental building block for creating consistent form layouts.
5+
---
6+
7+
import { useState } from "react";
8+
import { FormControl, InputLabel, MenuItem, Select, TextField, Box } from "@sistent/sistent";
9+
10+
export const BasicFormControlCodeDemo = () => {
11+
return (
12+
<FormControl sx={{ width: "200px" }}>
13+
<InputLabel id="demo-form-control-label">Name</InputLabel>
14+
<Select
15+
labelId="demo-form-control-label"
16+
id="demo-form-control"
17+
label="Name"
18+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
19+
>
20+
<MenuItem value="john">John</MenuItem>
21+
<MenuItem value="jane">Jane</MenuItem>
22+
<MenuItem value="bob">Bob</MenuItem>
23+
</Select>
24+
</FormControl>
25+
);
26+
};
27+
28+
export const FullWidthFormControlCodeDemo = () => {
29+
return (
30+
<FormControl fullWidth>
31+
<TextField
32+
label="Full Width Input"
33+
variant="outlined"
34+
placeholder="This input takes full width"
35+
/>
36+
</FormControl>
37+
);
38+
};
39+
40+
export const RequiredFormControlCodeDemo = () => {
41+
return (
42+
<FormControl sx={{ width: "200px" }} required>
43+
<InputLabel id="demo-required-label">Required Field</InputLabel>
44+
<Select
45+
labelId="demo-required-label"
46+
id="demo-required"
47+
label="Required Field"
48+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
49+
>
50+
<MenuItem value="option1">Option 1</MenuItem>
51+
<MenuItem value="option2">Option 2</MenuItem>
52+
</Select>
53+
</FormControl>
54+
);
55+
};
56+
57+
export const ErrorFormControlCodeDemo = () => {
58+
return (
59+
<FormControl sx={{ width: "200px" }} error>
60+
<InputLabel id="demo-error-label">Email</InputLabel>
61+
<Select
62+
labelId="demo-error-label"
63+
id="demo-error"
64+
label="Email"
65+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
66+
>
67+
<MenuItem value="email1">email1@example.com</MenuItem>
68+
<MenuItem value="email2">email2@example.com</MenuItem>
69+
</Select>
70+
</FormControl>
71+
);
72+
};
73+
74+
export const DisabledFormControlCodeDemo = () => {
75+
return (
76+
<FormControl sx={{ width: "200px" }} disabled>
77+
<InputLabel id="demo-disabled-label">Disabled Field</InputLabel>
78+
<Select
79+
labelId="demo-disabled-label"
80+
id="demo-disabled"
81+
label="Disabled Field"
82+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
83+
>
84+
<MenuItem value="option1">Option 1</MenuItem>
85+
<MenuItem value="option2">Option 2</MenuItem>
86+
</Select>
87+
</FormControl>
88+
);
89+
};
90+
91+
export const SizeFormControlCodeDemo = () => {
92+
return (
93+
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
94+
<FormControl sx={{ width: "200px" }} size="small">
95+
<InputLabel id="demo-small-label">Small Size</InputLabel>
96+
<Select
97+
labelId="demo-small-label"
98+
id="demo-small"
99+
label="Small Size"
100+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
101+
>
102+
<MenuItem value="small">Small Option</MenuItem>
103+
</Select>
104+
</FormControl>
105+
106+
<FormControl sx={{ width: "200px" }} size="medium">
107+
<InputLabel id="demo-medium-label">Medium Size</InputLabel>
108+
<Select
109+
labelId="demo-medium-label"
110+
id="demo-medium"
111+
label="Medium Size"
112+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
113+
>
114+
<MenuItem value="medium">Medium Option</MenuItem>
115+
</Select>
116+
</FormControl>
117+
</Box>
118+
);
119+
};
120+
121+
<a id="Basic Usage">
122+
<h2>Basic Usage</h2>
123+
</a>
124+
<p>
125+
The most common use case for FormControl is wrapping form inputs with labels.
126+
</p>
127+
128+
<div className="showcase">
129+
<div className="items">
130+
<ThemeWrapper>
131+
<BasicFormControlCodeDemo />
132+
</ThemeWrapper>
133+
</div>
134+
<CodeBlock name="basic-form-control" collapsible code={`<FormControl sx={{ width: "200px" }}>
135+
<InputLabel id="demo-form-control-label">Name</InputLabel>
136+
<Select
137+
labelId="demo-form-control-label"
138+
id="demo-form-control"
139+
label="Name"
140+
>
141+
<MenuItem value="john">John</MenuItem>
142+
<MenuItem value="jane">Jane</MenuItem>
143+
<MenuItem value="bob">Bob</MenuItem>
144+
</Select>
145+
</FormControl>`} />
146+
</div>
147+
148+
<a id="Full Width">
149+
<h2>Full Width</h2>
150+
</a>
151+
<p>
152+
Use the <code>fullWidth</code> prop to make the FormControl take the full width of its container.
153+
</p>
154+
155+
<div className="showcase">
156+
<div className="items">
157+
<ThemeWrapper>
158+
<FullWidthFormControlCodeDemo />
159+
</ThemeWrapper>
160+
</div>
161+
<CodeBlock name="full-width-form-control" collapsible code={`<FormControl fullWidth>
162+
<TextField
163+
label="Full Width Input"
164+
variant="outlined"
165+
placeholder="This input takes full width"
166+
/>
167+
</FormControl>`} />
168+
</div>
169+
170+
<a id="Required Fields">
171+
<h2>Required Fields</h2>
172+
</a>
173+
<p>
174+
Add the <code>required</code> prop to indicate that a field must be filled.
175+
</p>
176+
177+
<div className="showcase">
178+
<div className="items">
179+
<ThemeWrapper>
180+
<RequiredFormControlCodeDemo />
181+
</ThemeWrapper>
182+
</div>
183+
<CodeBlock name="required-form-control" collapsible code={`<FormControl sx={{ width: "200px" }} required>
184+
<InputLabel id="demo-required-label">Required Field</InputLabel>
185+
<Select
186+
labelId="demo-required-label"
187+
id="demo-required"
188+
label="Required Field"
189+
>
190+
<MenuItem value="option1">Option 1</MenuItem>
191+
<MenuItem value="option2">Option 2</MenuItem>
192+
</Select>
193+
</FormControl>`} />
194+
</div>
195+
196+
<a id="Error State">
197+
<h2>Error State</h2>
198+
</a>
199+
<p>
200+
Use the <code>error</code> prop to indicate validation errors.
201+
</p>
202+
203+
<div className="showcase">
204+
<div className="items">
205+
<ThemeWrapper>
206+
<ErrorFormControlCodeDemo />
207+
</ThemeWrapper>
208+
</div>
209+
<CodeBlock name="error-form-control" collapsible code={`<FormControl sx={{ width: "200px" }} error>
210+
<InputLabel id="demo-error-label">Email</InputLabel>
211+
<Select
212+
labelId="demo-error-label"
213+
id="demo-error"
214+
label="Email"
215+
>
216+
<MenuItem value="email1">email1@example.com</MenuItem>
217+
<MenuItem value="email2">email2@example.com</MenuItem>
218+
</Select>
219+
</FormControl>`} />
220+
</div>
221+
222+
<a id="Disabled State">
223+
<h2>Disabled State</h2>
224+
</a>
225+
<p>
226+
The <code>disabled</code> prop prevents user interaction with the form control.
227+
</p>
228+
229+
<div className="showcase">
230+
<div className="items">
231+
<ThemeWrapper>
232+
<DisabledFormControlCodeDemo />
233+
</ThemeWrapper>
234+
</div>
235+
<CodeBlock name="disabled-form-control" collapsible code={`<FormControl sx={{ width: "200px" }} disabled>
236+
<InputLabel id="demo-disabled-label">Disabled Field</InputLabel>
237+
<Select
238+
labelId="demo-disabled-label"
239+
id="demo-disabled"
240+
label="Disabled Field"
241+
>
242+
<MenuItem value="option1">Option 1</MenuItem>
243+
<MenuItem value="option2">Option 2</MenuItem>
244+
</Select>
245+
</FormControl>`} />
246+
</div>
247+
248+
<a id="Size Variants">
249+
<h2>Size Variants</h2>
250+
</a>
251+
<p>
252+
FormControl supports <code>small</code> and <code>medium</code> sizes.
253+
</p>
254+
255+
<div className="showcase">
256+
<div className="items">
257+
<ThemeWrapper>
258+
<SizeFormControlCodeDemo />
259+
</ThemeWrapper>
260+
</div>
261+
<CodeBlock name="size-form-control" collapsible code={`<FormControl sx={{ width: "200px" }} size="small">
262+
<InputLabel id="demo-small-label">Small Size</InputLabel>
263+
<Select
264+
labelId="demo-small-label"
265+
id="demo-small"
266+
label="Small Size"
267+
>
268+
<MenuItem value="small">Small Option</MenuItem>
269+
</Select>
270+
</FormControl>
271+
272+
<FormControl sx={{ width: "200px" }} size="medium">
273+
<InputLabel id="demo-medium-label">Medium Size</InputLabel>
274+
<Select
275+
labelId="demo-medium-label"
276+
id="demo-medium"
277+
label="Medium Size"
278+
>
279+
<MenuItem value="medium">Medium Option</MenuItem>
280+
</Select>
281+
</FormControl>`} />
282+
</div>

0 commit comments

Comments
 (0)