struxadotcloud/struxa

public

feat: global unslop6531421a month ago194 lines · 4.8 KB

1	# Forms & Inputs
2
3	## Contents
4
5	- Forms use FieldGroup + Field
6	- InputGroup requires InputGroupInput/InputGroupTextarea
7	- Buttons inside inputs use InputGroup + InputGroupAddon
8	- Option sets (2–7 choices) use ToggleGroup
9	- FieldSet + FieldLegend for grouping related fields
10	- Field validation and disabled states
11
12	---
13
14	## Forms use FieldGroup + Field
15
16	Always use `FieldGroup` + `Field` - never raw `
17
18	```tsx
19	<FieldGroup>
20	<Field>
21	<FieldLabel htmlFor=
22	<Input id=
23	</Field>
24	<Field>
25	<FieldLabel htmlFor=
26	<Input id=
27	</Field>
28	</FieldGroup>
29	```
30
31	Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
32
33	Choosing form controls:
34
35	- Simple text input → `Input`
36	- Dropdown with predefined options → `Select`
37	- Searchable dropdown → `Combobox`
38	- Native HTML select (no JS) → `native-select`
39	- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
40	- Single choice from few options → `RadioGroup`
41	- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
42	- OTP/verification code → `InputOTP`
43	- Multi-line text → `Textarea`
44
45	---
46
47	## InputGroup requires InputGroupInput/InputGroupTextarea
48
49	Never use raw `Input` or `Textarea` inside an `
50
51	Incorrect:
52
53	```tsx
54	<InputGroup>
55	<Input placeholder=
56	</InputGroup>
57	```
58
59	Correct:
60
61	```tsx
62	import { InputGroup, InputGroupInput
63
64	<InputGroup>
65	<InputGroupInput placeholder=
66	</InputGroup>;
67	```
68
69	---
70
71	## Buttons inside inputs use InputGroup + InputGroupAddon
72
73	Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
74
75	Incorrect:
76
77	```tsx
78	<div className="relative
79	<Input placeholder=
80	<Button className=
81	<SearchIcon />
82	</Button>
83	</div>
84	```
85
86	Correct:
87
88	```tsx
89	import { InputGroup, InputGroupInput
90
91	<InputGroup>
92	<InputGroupInput placeholder=
93	<InputGroupAddon>
94	<Button size=
95	<SearchIcon data-icon=
96	</Button>
97	</InputGroupAddon>
98	</InputGroup>;
99	```
100
101	---
102
103	## Option sets (2–7 choices) use ToggleGroup
104
105	Don't manually loop `Button` components with active state.
106
107	Incorrect:
108
109	```tsx
110	const [selected, setSelected
111
112	<div className="flex gap-2
113	{["daily", "weekly
114	<Button
115	key={option}
116	variant={selected ===
117	onClick={() =>
118	>
119	{option}
120	</Button>
121	))}
122	</div>
123	```
124
125	Correct:
126
127	```tsx
128	import { ToggleGroup, ToggleGroupItem
129
130	<ToggleGroup spacing={
131	<ToggleGroupItem value=
132	<ToggleGroupItem value=
133	<ToggleGroupItem value=
134	</ToggleGroup>;
135	```
136
137	Combine with `Field` for labelled toggle groups:
138
139	```tsx
140	<Field orientation="
141	<FieldTitle id=
142	<ToggleGroup aria-labelledby
143	<ToggleGroupItem value=
144	<ToggleGroupItem value=
145	<ToggleGroupItem value=
146	</ToggleGroup>
147	</Field>
148	```
149
150	> **Note:
151
152	---
153
154	## FieldSet + FieldLegend for grouping related fields
155
156	Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches - not `
157
158	```tsx
159	<FieldSet>
160	<FieldLegend variant=
161	<FieldDescription>Select all that apply.</FieldDescription
162	<FieldGroup className=
163	<Field orientation=
164	<Checkbox id=
165	<FieldLabel htmlFor=
166	Dark mode
167	</FieldLabel>
168	</Field>
169	</FieldGroup>
170	</FieldSet>
171	```
172
173	---
174
175	## Field validation and disabled states
176
177	Both attributes are needed - `data-invalid`/`data-disabled` styles the field (label, description), while
178
179	```tsx
180	// Invalid.
181	<Field data-invalid>
182	<FieldLabel htmlFor=
183	<Input id=
184	<FieldDescription>Invalid email address.</FieldDescription
185	</Field>
186
187	// Disabled.
188	<Field data-disabled>
189	<FieldLabel htmlFor=
190	<Input id=
191	</Field>
192	```
193
194	Works for all controls: `Input`, `Textarea`, `