@amedia/brick-mcp 0.0.2 → 0.1.0
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.
- package/data/components-metadata.json +28 -28
- package/data/tokens-documentation.json +1 -1
- package/data/tokens.json +4848 -128
- package/dist/data/components/brick-actions.md +59 -0
- package/dist/data/components/brick-alt-teaser.md +264 -0
- package/dist/data/components/brick-avatar.md +299 -0
- package/dist/data/components/brick-button.md +373 -0
- package/dist/data/components/brick-card.md +359 -0
- package/dist/data/components/brick-carousel.md +355 -0
- package/dist/data/components/brick-classnames.md +147 -0
- package/dist/data/components/brick-countdown.md +180 -0
- package/dist/data/components/brick-dialog.md +458 -0
- package/dist/data/components/brick-fonts.md +389 -0
- package/dist/data/components/brick-helloworld.md +228 -0
- package/dist/data/components/brick-icon.md +274 -0
- package/dist/data/components/brick-icons.md +570 -0
- package/dist/data/components/brick-illustrations.md +604 -0
- package/dist/data/components/brick-image.md +361 -0
- package/dist/data/components/brick-input.md +557 -0
- package/dist/data/components/brick-mcp.json +6 -0
- package/dist/data/components/brick-nifs.md +164 -0
- package/dist/data/components/brick-pill.json +6 -0
- package/dist/data/components/brick-player.json +7 -0
- package/dist/data/components/brick-published.json +7 -0
- package/dist/data/components/brick-share.json +7 -0
- package/dist/data/components/brick-stepper.json +7 -0
- package/dist/data/components/brick-tab.json +7 -0
- package/dist/data/components/brick-tabs.json +9 -0
- package/dist/data/components/brick-tag.json +7 -0
- package/dist/data/components/brick-teaser-player.json +9 -0
- package/dist/data/components/brick-teaser-reels.json +9 -0
- package/dist/data/components/brick-teaser.json +9 -0
- package/dist/data/components/brick-template.json +9 -0
- package/dist/data/components/brick-textarea.json +7 -0
- package/dist/data/components/brick-themes.json +6 -0
- package/dist/data/components/brick-toast.json +9 -0
- package/dist/data/components/brick-toggle.json +7 -0
- package/dist/data/components/brick-tokens.json +8 -0
- package/dist/data/components/brick-tooltip.json +7 -0
- package/dist/data/components-metadata.json +228 -0
- package/dist/data/tokens-documentation.json +7 -0
- package/dist/data/tokens.json +4976 -0
- package/dist/http.js +314 -0
- package/dist/http.js.map +7 -0
- package/dist/index.js +26 -37
- package/dist/index.js.map +2 -2
- package/package.json +1 -1
- package/scripts/generate-data.js +15 -47
|
@@ -0,0 +1,557 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: brick-input
|
|
3
|
+
version: 3.0.9
|
|
4
|
+
selector: brick-input-v3
|
|
5
|
+
category: Forms
|
|
6
|
+
tags: [input, form-control, text-field, validation, form-element, user-input]
|
|
7
|
+
use_cases:
|
|
8
|
+
[
|
|
9
|
+
forms,
|
|
10
|
+
authentication,
|
|
11
|
+
search,
|
|
12
|
+
checkout,
|
|
13
|
+
user-registration,
|
|
14
|
+
contact-forms,
|
|
15
|
+
surveys,
|
|
16
|
+
data-entry,
|
|
17
|
+
]
|
|
18
|
+
related: [brick-tokens, brick-form]
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# Brick Input
|
|
22
|
+
|
|
23
|
+
A web component that renders accessible input fields with labels, validation support, and comprehensive attribute options for all standard HTML input types.
|
|
24
|
+
|
|
25
|
+
## Key Capabilities
|
|
26
|
+
|
|
27
|
+
- Supports all standard HTML input types (text, email, password, number, date, checkbox, radio, etc.)
|
|
28
|
+
- Built-in label management with optional visual hiding (screen-reader accessible)
|
|
29
|
+
- Pattern-based validation with error messages and aria-live announcements
|
|
30
|
+
- Help text and optional field indicators
|
|
31
|
+
- Automatic asterisk addition for required radio/checkbox groups
|
|
32
|
+
- Full accessibility support with ARIA attributes
|
|
33
|
+
- SSR compatible with hydration support
|
|
34
|
+
- Framework-agnostic web component
|
|
35
|
+
|
|
36
|
+
## Props/Attributes
|
|
37
|
+
|
|
38
|
+
| Attribute | Type | Default | Required | Description |
|
|
39
|
+
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | ---------------------------------------------------------------------- |
|
|
40
|
+
| `type` | `'text' \| 'email' \| 'password' \| 'number' \| 'date' \| 'checkbox' \| 'radio' \| 'tel' \| 'url' \| 'search' \| 'file' \| 'color' \| 'range' \| 'time' \| 'button' \| 'submit' \| 'reset' \| 'hidden' \| 'image'` | `'text'` | yes | Type of input field to render |
|
|
41
|
+
| `data-label-text` | string | - | recommended | Label text for the input field |
|
|
42
|
+
| `data-id` | string | - | no | ID for the input element |
|
|
43
|
+
| `data-name` | string | - | no | Name attribute for form submission |
|
|
44
|
+
| `data-value` | string | - | no | Initial value of the input |
|
|
45
|
+
| `data-placeholder` | string | - | no | Placeholder text |
|
|
46
|
+
| `data-required` | boolean | `false` | no | Marks the field as required |
|
|
47
|
+
| `data-disabled` | boolean | `false` | no | Disables the input |
|
|
48
|
+
| `data-readonly` | boolean | `false` | no | Makes the input read-only |
|
|
49
|
+
| `data-label-hidden` | boolean | `false` | no | Visually hides label (still accessible to screen readers) |
|
|
50
|
+
| `data-pattern` | string | - | no | Regex pattern for validation (text, password, search, tel, url, email) |
|
|
51
|
+
| `data-errortext` | string | `'Feltet må fylles ut korrekt.'` | no | Error message shown on validation failure |
|
|
52
|
+
| `data-helptext` | string | - | no | Helper text displayed below the input |
|
|
53
|
+
| `data-optionaltext` | string | - | no | Text to indicate optional fields (e.g., "optional") |
|
|
54
|
+
| `data-min` | string | - | no | Minimum value (for number, date, range) |
|
|
55
|
+
| `data-max` | string | - | no | Maximum value (for number, date, range) |
|
|
56
|
+
| `data-minlength` | string | - | no | Minimum character length |
|
|
57
|
+
| `data-maxlength` | string | - | no | Maximum character length |
|
|
58
|
+
| `data-step` | string | - | no | Step value for number/range inputs |
|
|
59
|
+
| `data-size` | string | - | no | Size of the input field |
|
|
60
|
+
| `data-autocomplete` | string | - | no | Autocomplete attribute value |
|
|
61
|
+
| `data-autofocus` | boolean | `false` | no | Auto-focus the input on page load |
|
|
62
|
+
| `data-spellcheck` | boolean | `false` | no | Enable spellcheck |
|
|
63
|
+
| `data-checked` | boolean | `false` | no | Initial checked state (checkbox, radio) |
|
|
64
|
+
| `data-accept` | string | - | no | Accepted file types (for file inputs) |
|
|
65
|
+
| `data-multiple` | boolean | `false` | no | Allow multiple file selection or options |
|
|
66
|
+
| `data-src` | string | - | no | Image source (for image type) |
|
|
67
|
+
| `data-alt` | string | - | no | Alt text (for image type) |
|
|
68
|
+
| `data-list` | string | - | no | ID of datalist element for autocomplete suggestions |
|
|
69
|
+
|
|
70
|
+
## Examples
|
|
71
|
+
|
|
72
|
+
### Basic Text Input
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<brick-input-v3
|
|
76
|
+
data-type="text"
|
|
77
|
+
data-label-text="First Name"
|
|
78
|
+
data-id="firstname"
|
|
79
|
+
data-name="firstname"
|
|
80
|
+
data-required="true"
|
|
81
|
+
>
|
|
82
|
+
</brick-input-v3>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Email Input with Validation
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<brick-input-v3
|
|
89
|
+
data-type="email"
|
|
90
|
+
data-label-text="Email Address"
|
|
91
|
+
data-id="email"
|
|
92
|
+
data-name="email"
|
|
93
|
+
data-required="true"
|
|
94
|
+
data-placeholder="you@example.com"
|
|
95
|
+
data-errortext="Please enter a valid email address"
|
|
96
|
+
data-helptext="We'll never share your email"
|
|
97
|
+
>
|
|
98
|
+
</brick-input-v3>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Password Input
|
|
102
|
+
|
|
103
|
+
```html
|
|
104
|
+
<brick-input-v3
|
|
105
|
+
data-type="password"
|
|
106
|
+
data-label-text="Password"
|
|
107
|
+
data-id="password"
|
|
108
|
+
data-name="password"
|
|
109
|
+
data-required="true"
|
|
110
|
+
data-minlength="8"
|
|
111
|
+
data-pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
|
|
112
|
+
data-errortext="Password must be at least 8 characters with letters and numbers"
|
|
113
|
+
>
|
|
114
|
+
</brick-input-v3>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Number Input with Range
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<brick-input-v3
|
|
121
|
+
data-type="number"
|
|
122
|
+
data-label-text="Age"
|
|
123
|
+
data-id="age"
|
|
124
|
+
data-name="age"
|
|
125
|
+
data-min="18"
|
|
126
|
+
data-max="120"
|
|
127
|
+
data-required="true"
|
|
128
|
+
>
|
|
129
|
+
</brick-input-v3>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Checkbox Input
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<brick-input-v3
|
|
136
|
+
data-type="checkbox"
|
|
137
|
+
data-label-text="I accept the terms and conditions"
|
|
138
|
+
data-id="terms"
|
|
139
|
+
data-name="terms"
|
|
140
|
+
data-value="accepted"
|
|
141
|
+
data-required="true"
|
|
142
|
+
>
|
|
143
|
+
</brick-input-v3>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Radio Button Group
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<!-- Radio buttons should be wrapped in a fieldset with legend -->
|
|
150
|
+
<fieldset>
|
|
151
|
+
<legend>Select an option</legend>
|
|
152
|
+
|
|
153
|
+
<brick-input-v3
|
|
154
|
+
data-type="radio"
|
|
155
|
+
data-label-text="Option 1"
|
|
156
|
+
data-id="option1"
|
|
157
|
+
data-name="choice"
|
|
158
|
+
data-value="1"
|
|
159
|
+
data-required="true"
|
|
160
|
+
>
|
|
161
|
+
</brick-input-v3>
|
|
162
|
+
|
|
163
|
+
<brick-input-v3
|
|
164
|
+
data-type="radio"
|
|
165
|
+
data-label-text="Option 2"
|
|
166
|
+
data-id="option2"
|
|
167
|
+
data-name="choice"
|
|
168
|
+
data-value="2"
|
|
169
|
+
data-required="true"
|
|
170
|
+
>
|
|
171
|
+
</brick-input-v3>
|
|
172
|
+
</fieldset>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Date Input
|
|
176
|
+
|
|
177
|
+
```html
|
|
178
|
+
<brick-input-v3
|
|
179
|
+
data-type="date"
|
|
180
|
+
data-label-text="Date of Birth"
|
|
181
|
+
data-id="dob"
|
|
182
|
+
data-name="dob"
|
|
183
|
+
data-min="1900-01-01"
|
|
184
|
+
data-max="2025-12-31"
|
|
185
|
+
data-required="true"
|
|
186
|
+
>
|
|
187
|
+
</brick-input-v3>
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Search Input
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
<brick-input-v3
|
|
194
|
+
data-type="search"
|
|
195
|
+
data-label-text="Search"
|
|
196
|
+
data-label-hidden="true"
|
|
197
|
+
data-id="search"
|
|
198
|
+
data-name="q"
|
|
199
|
+
data-placeholder="Search articles..."
|
|
200
|
+
>
|
|
201
|
+
</brick-input-v3>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### File Upload
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<brick-input-v3
|
|
208
|
+
data-type="file"
|
|
209
|
+
data-label-text="Upload Document"
|
|
210
|
+
data-id="document"
|
|
211
|
+
data-name="document"
|
|
212
|
+
data-accept=".pdf,.doc,.docx"
|
|
213
|
+
data-multiple="true"
|
|
214
|
+
>
|
|
215
|
+
</brick-input-v3>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Input with Datalist (Autocomplete)
|
|
219
|
+
|
|
220
|
+
```html
|
|
221
|
+
<brick-input-v3
|
|
222
|
+
data-type="text"
|
|
223
|
+
data-label-text="Choose a browser"
|
|
224
|
+
data-id="browser"
|
|
225
|
+
data-name="browser"
|
|
226
|
+
data-list="browsers"
|
|
227
|
+
>
|
|
228
|
+
</brick-input-v3>
|
|
229
|
+
|
|
230
|
+
<datalist id="browsers">
|
|
231
|
+
<option value="Chrome"></option>
|
|
232
|
+
<option value="Firefox"></option>
|
|
233
|
+
<option value="Safari"></option>
|
|
234
|
+
<option value="Edge"></option>
|
|
235
|
+
</datalist>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### Optional Field
|
|
239
|
+
|
|
240
|
+
```html
|
|
241
|
+
<brick-input-v3
|
|
242
|
+
data-type="text"
|
|
243
|
+
data-label-text="Middle Name"
|
|
244
|
+
data-id="middlename"
|
|
245
|
+
data-name="middlename"
|
|
246
|
+
data-optionaltext="(optional)"
|
|
247
|
+
>
|
|
248
|
+
</brick-input-v3>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### Phone Number with Pattern
|
|
252
|
+
|
|
253
|
+
```html
|
|
254
|
+
<brick-input-v3
|
|
255
|
+
data-type="tel"
|
|
256
|
+
data-label-text="Phone Number"
|
|
257
|
+
data-id="phone"
|
|
258
|
+
data-name="phone"
|
|
259
|
+
data-pattern="[0-9]{8}"
|
|
260
|
+
data-placeholder="12345678"
|
|
261
|
+
data-errortext="Please enter a valid 8-digit phone number"
|
|
262
|
+
data-required="true"
|
|
263
|
+
>
|
|
264
|
+
</brick-input-v3>
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
## Framework Integration
|
|
268
|
+
|
|
269
|
+
### Svelte
|
|
270
|
+
|
|
271
|
+
```svelte
|
|
272
|
+
<script>
|
|
273
|
+
import '@amedia/brick-input';
|
|
274
|
+
|
|
275
|
+
let email = '';
|
|
276
|
+
|
|
277
|
+
function handleChange(event) {
|
|
278
|
+
email = event.target.value;
|
|
279
|
+
console.log('Email changed:', email);
|
|
280
|
+
}
|
|
281
|
+
</script>
|
|
282
|
+
|
|
283
|
+
<brick-input-v3
|
|
284
|
+
data-type="email"
|
|
285
|
+
data-label-text="Email"
|
|
286
|
+
data-id="email"
|
|
287
|
+
data-name="email"
|
|
288
|
+
data-required="true"
|
|
289
|
+
onchange={handleChange}
|
|
290
|
+
/>
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
### React
|
|
294
|
+
|
|
295
|
+
```javascript
|
|
296
|
+
import '@amedia/brick-input';
|
|
297
|
+
|
|
298
|
+
function MyForm() {
|
|
299
|
+
const handleChange = (e) => {
|
|
300
|
+
console.log('Value:', e.target.value);
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
return (
|
|
304
|
+
<brick-input-v3
|
|
305
|
+
data-type="text"
|
|
306
|
+
data-label-text="Username"
|
|
307
|
+
data-id="username"
|
|
308
|
+
data-name="username"
|
|
309
|
+
data-required="true"
|
|
310
|
+
onChange={handleChange}
|
|
311
|
+
/>
|
|
312
|
+
);
|
|
313
|
+
}
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
## Programmatic Usage
|
|
317
|
+
|
|
318
|
+
```javascript
|
|
319
|
+
import { BrickInput } from '@amedia/brick-input';
|
|
320
|
+
|
|
321
|
+
const input = new BrickInput({
|
|
322
|
+
type: 'email',
|
|
323
|
+
labelText: 'Email Address',
|
|
324
|
+
id: 'email',
|
|
325
|
+
name: 'email',
|
|
326
|
+
required: true,
|
|
327
|
+
placeholder: 'you@example.com',
|
|
328
|
+
});
|
|
329
|
+
|
|
330
|
+
// Set change handler
|
|
331
|
+
input.onChange = (event) => {
|
|
332
|
+
console.log('Value changed:', event.target.value);
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
// Add to DOM
|
|
336
|
+
document.querySelector('form').appendChild(input);
|
|
337
|
+
```
|
|
338
|
+
|
|
339
|
+
## Server-Side Rendering
|
|
340
|
+
|
|
341
|
+
```javascript
|
|
342
|
+
import { renderBrickInput } from '@amedia/brick-input/template';
|
|
343
|
+
|
|
344
|
+
const inputHTML = renderBrickInput({
|
|
345
|
+
type: 'text',
|
|
346
|
+
labelText: 'First Name',
|
|
347
|
+
id: 'firstname',
|
|
348
|
+
name: 'firstname',
|
|
349
|
+
required: true,
|
|
350
|
+
});
|
|
351
|
+
|
|
352
|
+
// Include CSS file in your HTML
|
|
353
|
+
// <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-input/v3/css/styles.css">
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
## Accessibility
|
|
357
|
+
|
|
358
|
+
- **WCAG 2.1 AA** compliant
|
|
359
|
+
- Labels are always associated with inputs via `for` attribute
|
|
360
|
+
- `data-label-hidden` provides visually hidden labels that remain accessible to screen readers
|
|
361
|
+
- Error messages announced via `aria-live` regions
|
|
362
|
+
- Required fields automatically get asterisks for radio/checkbox groups
|
|
363
|
+
- Pattern validation triggers on blur with screen reader announcements
|
|
364
|
+
- All standard ARIA attributes supported through native HTML input
|
|
365
|
+
- Keyboard navigation fully supported
|
|
366
|
+
- Focus states clearly visible
|
|
367
|
+
|
|
368
|
+
## Validation
|
|
369
|
+
|
|
370
|
+
Validation is triggered on `blur` event for inputs with a `data-pattern` attribute:
|
|
371
|
+
|
|
372
|
+
```html
|
|
373
|
+
<brick-input-v3
|
|
374
|
+
data-type="text"
|
|
375
|
+
data-label-text="Username"
|
|
376
|
+
data-pattern="^[a-zA-Z0-9_]{3,16}$"
|
|
377
|
+
data-errortext="Username must be 3-16 characters (letters, numbers, underscore only)"
|
|
378
|
+
>
|
|
379
|
+
</brick-input-v3>
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
**Supported types for pattern validation:**
|
|
383
|
+
|
|
384
|
+
- text
|
|
385
|
+
- password
|
|
386
|
+
- search
|
|
387
|
+
- tel
|
|
388
|
+
- url
|
|
389
|
+
- email
|
|
390
|
+
|
|
391
|
+
Error messages are:
|
|
392
|
+
|
|
393
|
+
- Displayed visually below the input
|
|
394
|
+
- Announced to screen readers via aria-live="polite"
|
|
395
|
+
- Only shown after the user has interacted with the field (on blur)
|
|
396
|
+
|
|
397
|
+
## Common Patterns
|
|
398
|
+
|
|
399
|
+
### Login Form
|
|
400
|
+
|
|
401
|
+
```html
|
|
402
|
+
<form>
|
|
403
|
+
<brick-input-v3
|
|
404
|
+
data-type="email"
|
|
405
|
+
data-label-text="Email"
|
|
406
|
+
data-id="login-email"
|
|
407
|
+
data-name="email"
|
|
408
|
+
data-autocomplete="email"
|
|
409
|
+
data-required="true"
|
|
410
|
+
>
|
|
411
|
+
</brick-input-v3>
|
|
412
|
+
|
|
413
|
+
<brick-input-v3
|
|
414
|
+
data-type="password"
|
|
415
|
+
data-label-text="Password"
|
|
416
|
+
data-id="login-password"
|
|
417
|
+
data-name="password"
|
|
418
|
+
data-autocomplete="current-password"
|
|
419
|
+
data-required="true"
|
|
420
|
+
>
|
|
421
|
+
</brick-input-v3>
|
|
422
|
+
|
|
423
|
+
<button type="submit">Log In</button>
|
|
424
|
+
</form>
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
### Registration Form
|
|
428
|
+
|
|
429
|
+
```html
|
|
430
|
+
<form>
|
|
431
|
+
<brick-input-v3
|
|
432
|
+
data-type="text"
|
|
433
|
+
data-label-text="Full Name"
|
|
434
|
+
data-id="fullname"
|
|
435
|
+
data-name="fullname"
|
|
436
|
+
data-autocomplete="name"
|
|
437
|
+
data-required="true"
|
|
438
|
+
>
|
|
439
|
+
</brick-input-v3>
|
|
440
|
+
|
|
441
|
+
<brick-input-v3
|
|
442
|
+
data-type="email"
|
|
443
|
+
data-label-text="Email"
|
|
444
|
+
data-id="email"
|
|
445
|
+
data-name="email"
|
|
446
|
+
data-autocomplete="email"
|
|
447
|
+
data-required="true"
|
|
448
|
+
>
|
|
449
|
+
</brick-input-v3>
|
|
450
|
+
|
|
451
|
+
<brick-input-v3
|
|
452
|
+
data-type="password"
|
|
453
|
+
data-label-text="Password"
|
|
454
|
+
data-id="password"
|
|
455
|
+
data-name="password"
|
|
456
|
+
data-autocomplete="new-password"
|
|
457
|
+
data-minlength="8"
|
|
458
|
+
data-required="true"
|
|
459
|
+
>
|
|
460
|
+
</brick-input-v3>
|
|
461
|
+
|
|
462
|
+
<brick-input-v3
|
|
463
|
+
data-type="checkbox"
|
|
464
|
+
data-label-text="I agree to the terms and conditions"
|
|
465
|
+
data-id="terms"
|
|
466
|
+
data-name="terms"
|
|
467
|
+
data-required="true"
|
|
468
|
+
>
|
|
469
|
+
</brick-input-v3>
|
|
470
|
+
|
|
471
|
+
<button type="submit">Register</button>
|
|
472
|
+
</form>
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
### Search Box
|
|
476
|
+
|
|
477
|
+
```html
|
|
478
|
+
<form role="search">
|
|
479
|
+
<brick-input-v3
|
|
480
|
+
data-type="search"
|
|
481
|
+
data-label-text="Search"
|
|
482
|
+
data-label-hidden="true"
|
|
483
|
+
data-id="search"
|
|
484
|
+
data-name="q"
|
|
485
|
+
data-placeholder="Search articles..."
|
|
486
|
+
data-autocomplete="off"
|
|
487
|
+
>
|
|
488
|
+
</brick-input-v3>
|
|
489
|
+
|
|
490
|
+
<button type="submit">Search</button>
|
|
491
|
+
</form>
|
|
492
|
+
```
|
|
493
|
+
|
|
494
|
+
### Contact Form
|
|
495
|
+
|
|
496
|
+
```html
|
|
497
|
+
<form>
|
|
498
|
+
<brick-input-v3
|
|
499
|
+
data-type="text"
|
|
500
|
+
data-label-text="Name"
|
|
501
|
+
data-id="contact-name"
|
|
502
|
+
data-name="name"
|
|
503
|
+
data-required="true"
|
|
504
|
+
>
|
|
505
|
+
</brick-input-v3>
|
|
506
|
+
|
|
507
|
+
<brick-input-v3
|
|
508
|
+
data-type="email"
|
|
509
|
+
data-label-text="Email"
|
|
510
|
+
data-id="contact-email"
|
|
511
|
+
data-name="email"
|
|
512
|
+
data-required="true"
|
|
513
|
+
>
|
|
514
|
+
</brick-input-v3>
|
|
515
|
+
|
|
516
|
+
<brick-input-v3
|
|
517
|
+
data-type="tel"
|
|
518
|
+
data-label-text="Phone"
|
|
519
|
+
data-id="contact-phone"
|
|
520
|
+
data-name="phone"
|
|
521
|
+
data-optionaltext="(optional)"
|
|
522
|
+
>
|
|
523
|
+
</brick-input-v3>
|
|
524
|
+
|
|
525
|
+
<button type="submit">Send</button>
|
|
526
|
+
</form>
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
## Technical Details
|
|
530
|
+
|
|
531
|
+
- **Custom Element**: `brick-input-v3`
|
|
532
|
+
- **Base Class**: BrickElement
|
|
533
|
+
- **Dependencies**:
|
|
534
|
+
- @amedia/brick-tokens (design tokens and utilities)
|
|
535
|
+
- @amedia/brick-template (base class)
|
|
536
|
+
- **Renders as**: Various `<input>` types wrapped with `<label>`
|
|
537
|
+
- **SSR Compatible**: Yes, with hydration support
|
|
538
|
+
- **Framework**: Framework-agnostic web component
|
|
539
|
+
|
|
540
|
+
## Important Notes
|
|
541
|
+
|
|
542
|
+
- The `type` attribute is required - defaults to `'text'` if not provided
|
|
543
|
+
- Use `data-label-text` for accessibility - it creates proper label associations
|
|
544
|
+
- Use `data-label-hidden` to visually hide labels while keeping them accessible to screen readers
|
|
545
|
+
- Pattern validation only works with: text, password, search, tel, url, and email types
|
|
546
|
+
- For radio buttons and checkboxes, wrap groups in a `<fieldset>` with a `<legend>`
|
|
547
|
+
- Required radio/checkbox groups automatically get asterisks added to their parent legend
|
|
548
|
+
- Error messages are announced to screen readers via aria-live regions
|
|
549
|
+
- Validation triggers on blur (when user leaves the field)
|
|
550
|
+
- The component provides an `onChange` setter/getter for custom change handling
|
|
551
|
+
- Checkbox and radio inputs automatically manage their `checked` attribute on change
|
|
552
|
+
- Version 3.0.0 removed the `getCssText` export - use CSS files instead
|
|
553
|
+
- Version 2.0.0 changed the onChange event to bubble up correctly
|
|
554
|
+
|
|
555
|
+
## Version
|
|
556
|
+
|
|
557
|
+
Current version: 3.0.9
|