@ceed/ads 1.23.4 → 1.23.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -67,11 +67,7 @@ Use FormControl with Select for dropdown fields.
|
|
|
67
67
|
```tsx
|
|
68
68
|
<FormControl>
|
|
69
69
|
<FormLabel>Role</FormLabel>
|
|
70
|
-
<Select placeholder="Select a role"
|
|
71
|
-
<Option value="admin">Admin</Option>
|
|
72
|
-
<Option value="editor">Editor</Option>
|
|
73
|
-
<Option value="viewer">Viewer</Option>
|
|
74
|
-
</Select>
|
|
70
|
+
<Select placeholder="Select a role" options={roleOptions} />
|
|
75
71
|
<FormHelperText>Select the user role.</FormHelperText>
|
|
76
72
|
</FormControl>
|
|
77
73
|
```
|
|
@@ -83,7 +79,7 @@ Set `error` on FormControl to propagate the error state to all child components.
|
|
|
83
79
|
```tsx
|
|
84
80
|
<FormControl error>
|
|
85
81
|
<FormLabel>Email</FormLabel>
|
|
86
|
-
<Input placeholder="email@example.com"
|
|
82
|
+
<Input placeholder="email@example.com" defaultValue="invalid-email" />
|
|
87
83
|
<FormHelperText>Please enter a valid email address.</FormHelperText>
|
|
88
84
|
</FormControl>
|
|
89
85
|
```
|
|
@@ -103,7 +99,7 @@ Set `disabled` to disable all child form elements at once.
|
|
|
103
99
|
```tsx
|
|
104
100
|
<FormControl disabled>
|
|
105
101
|
<FormLabel>Name</FormLabel>
|
|
106
|
-
<Input placeholder="Enter name"
|
|
102
|
+
<Input placeholder="Enter name" defaultValue="John Doe" />
|
|
107
103
|
<FormHelperText>This field is disabled.</FormHelperText>
|
|
108
104
|
</FormControl>
|
|
109
105
|
```
|
|
@@ -195,11 +191,7 @@ A complete form demonstrating FormControl with multiple input types.
|
|
|
195
191
|
</FormControl>
|
|
196
192
|
<FormControl>
|
|
197
193
|
<FormLabel>Role</FormLabel>
|
|
198
|
-
<Select placeholder="Select a role"
|
|
199
|
-
<Option value="admin">Admin</Option>
|
|
200
|
-
<Option value="editor">Editor</Option>
|
|
201
|
-
<Option value="viewer">Viewer</Option>
|
|
202
|
-
</Select>
|
|
194
|
+
<Select placeholder="Select a role" options={roleOptions} />
|
|
203
195
|
</FormControl>
|
|
204
196
|
<FormControl>
|
|
205
197
|
<FormLabel>Bio</FormLabel>
|
|
@@ -257,9 +249,7 @@ function RegistrationForm() {
|
|
|
257
249
|
<FormControl required error={!!errors.password}>
|
|
258
250
|
<FormLabel>Password</FormLabel>
|
|
259
251
|
<Input type="password" placeholder="Enter password" />
|
|
260
|
-
<FormHelperText>
|
|
261
|
-
{errors.password || 'Must be at least 8 characters.'}
|
|
262
|
-
</FormHelperText>
|
|
252
|
+
<FormHelperText>{errors.password || 'Must be at least 8 characters.'}</FormHelperText>
|
|
263
253
|
</FormControl>
|
|
264
254
|
|
|
265
255
|
<FormControl orientation="horizontal">
|
|
@@ -283,10 +273,13 @@ function SettingsForm() {
|
|
|
283
273
|
|
|
284
274
|
<FormControl>
|
|
285
275
|
<FormLabel>Language</FormLabel>
|
|
286
|
-
<Select
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
276
|
+
<Select
|
|
277
|
+
defaultValue="en"
|
|
278
|
+
options={[
|
|
279
|
+
{ value: 'en', label: 'English' },
|
|
280
|
+
{ value: 'ko', label: 'Korean' },
|
|
281
|
+
]}
|
|
282
|
+
/>
|
|
290
283
|
</FormControl>
|
|
291
284
|
|
|
292
285
|
<FormControl>
|