0
# HTML Attributes
1

2
Comprehensive attribute system supporting global HTML attributes and element-specific attributes with type safety, proper scoping, and integration with Compose's reactive system.
3

4
## Core Imports
5

6
```kotlin
7
import androidx.compose.runtime.*
8
import org.jetbrains.compose.web.attributes.*
9
import org.jetbrains.compose.web.css.*
10
```
11

12
## Capabilities
13

14
### Core Attribute System
15

16
Base interfaces and types for attribute management with type-safe scoping per element type.
17

18
```kotlin { .api }
19
/**
20
 * Main interface for element attributes with type safety per element
21
 */
22
interface AttrsScope<TElement> {
23
    // Core attribute functions defined below
24
}
25

26
/**
27
 * Implementation of attributes scope
28
 */
29
class AttrsScopeBuilder<TElement> : AttrsScope<TElement>
30

31
/**
32
 * Type alias for attribute builder context
33
 */
34
typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
35
```
36

37
### Global HTML Attributes
38

39
Attributes available on all HTML elements providing common functionality.
40

41
```kotlin { .api }
42
/**
43
 * Set element ID attribute
44
 */
45
fun AttrsScope<*>.id(value: String)
46

47
/**
48
 * Set CSS classes using vararg strings
49
 */
50
fun AttrsScope<*>.classes(vararg classes: String)
51

52
/**
53
 * Set CSS classes from a collection
54
 */
55
fun AttrsScope<*>.classes(classes: Collection<String>)
56

57
/**
58
 * Set hidden attribute to hide element
59
 */
60
fun AttrsScope<*>.hidden()
61

62
/**
63
 * Set title attribute for tooltips
64
 */
65
fun AttrsScope<*>.title(value: String)
66

67
/**
68
 * Set text direction attribute
69
 */
70
fun AttrsScope<*>.dir(value: DirType)
71

72
/**
73
 * Set draggable behavior
74
 */
75
fun AttrsScope<*>.draggable(value: Draggable)
76

77
/**
78
 * Set content editable state
79
 */
80
fun AttrsScope<*>.contentEditable(value: Boolean)
81

82
/**
83
 * Set language attribute
84
 */
85
fun AttrsScope<*>.lang(value: String)
86

87
/**
88
 * Set tab index for keyboard navigation
89
 */
90
fun AttrsScope<*>.tabIndex(value: Int)
91

92
/**
93
 * Set spell check behavior
94
 */
95
fun AttrsScope<*>.spellCheck(value: Boolean)
96

97
/**
98
 * Set input mode hint for virtual keyboards
99
 */
100
fun AttrsScope<*>.inputMode(value: String)
101
fun AttrsScope<*>.inputMode(value: InputMode)
102
```
103

104
**Global Attribute Types:**
105

106
```kotlin { .api }
107
enum class DirType {
108
    ltr, rtl, auto
109
}
110

111
enum class Draggable {
112
    True, False, Auto
113
}
114

115
enum class InputMode(val value: String) {
116
    None("none"),
117
    Text("text"),
118
    Decimal("decimal"),
119
    Numeric("numeric"),
120
    Tel("tel"),
121
    Search("search"),
122
    Email("email"),
123
    Url("url")
124
}
125
```
126

127
**Usage Examples:**
128

129
```kotlin
130
Div({
131
    id("main-container")
132
    classes("container", "full-width")
133
    title("Main content area")
134
    lang("en")
135
    dir(DirType.ltr)
136
}) {
137
    // Content
138
}
139

140
Button({
141
    tabIndex(1)
142
    draggable(Draggable.False)
143
    contentEditable(false)
144
}) {
145
    Text("Interactive Button")
146
}
147
```
148

149
### Element References and Properties
150

151
Access to DOM elements and property manipulation with proper lifecycle management.
152

153
```kotlin { .api }
154
/**
155
 * Get reference to the DOM element with disposal effect
156
 */
157
fun <TElement> AttrsScope<TElement>.ref(
158
    effect: DisposableEffectScope.(TElement) -> DisposableEffectResult
159
)
160

161
/**
162
 * Set generic HTML attribute
163
 */
164
fun AttrsScope<*>.attr(attr: String, value: String)
165

166
/**
167
 * Set element property directly on DOM element
168
 */
169
fun <TElement, V> AttrsScope<TElement>.prop(
170
    update: (TElement, V) -> Unit, 
171
    value: V
172
)
173
```
174

175
**Usage Examples:**
176

177
```kotlin
178
Canvas({
179
    ref { canvas ->
180
        val context = canvas.getContext("2d") as CanvasRenderingContext2D
181
        context.fillStyle = "red"
182
        context.fillRect(0.0, 0.0, 100.0, 100.0)
183
        
184
        onDispose { 
185
            // Cleanup if needed
186
        }
187
    }
188
    
189
    // Custom attribute
190
    attr("data-canvas-id", "main-canvas")
191
    
192
    // Direct property access
193
    prop({ element, value -> element.width = value }, 800)
194
})
195
```
196

197
### Form Attributes
198

199
Comprehensive form-related attributes supporting both controlled and uncontrolled patterns.
200

201
```kotlin { .api }
202
/**
203
 * Set input type
204
 */
205
fun AttrsScope<HTMLInputElement>.type(value: InputType<*>)
206

207
/**
208
 * Set controlled input value (triggers recomposition on change)
209
 */
210
fun AttrsScope<HTMLInputElement>.value(value: String)
211
fun AttrsScope<HTMLInputElement>.value(value: Number)
212
fun AttrsScope<HTMLInputElement>.value(value: Boolean)
213

214
/**
215
 * Set default value for uncontrolled inputs
216
 */
217
fun AttrsScope<HTMLInputElement>.defaultValue(value: String)
218

219
/**
220
 * Set checked state for checkboxes and radio buttons
221
 */
222
fun AttrsScope<HTMLInputElement>.checked(value: Boolean)
223

224
/**
225
 * Set default checked state for uncontrolled inputs
226
 */
227
fun AttrsScope<HTMLInputElement>.defaultChecked(value: Boolean)
228

229
/**
230
 * Set placeholder text
231
 */
232
fun AttrsScope<HTMLInputElement>.placeholder(value: String)
233

234
/**
235
 * Mark field as required
236
 */
237
fun AttrsScope<HTMLInputElement>.required()
238

239
/**
240
 * Set disabled state
241
 */
242
fun AttrsScope<HTMLInputElement>.disabled()
243

244
/**
245
 * Set read-only state
246
 */
247
fun AttrsScope<HTMLInputElement>.readOnly()
248

249
/**
250
 * Set auto-focus on page load
251
 */
252
fun AttrsScope<HTMLInputElement>.autoFocus()
253

254
/**
255
 * Set form field name
256
 */
257
fun AttrsScope<HTMLInputElement>.name(value: String)
258

259
/**
260
 * Set validation pattern (regex)
261
 */
262
fun AttrsScope<HTMLInputElement>.pattern(value: String)
263

264
/**
265
 * Set minimum value for numeric inputs
266
 */
267
fun AttrsScope<HTMLInputElement>.min(value: String)
268

269
/**
270
 * Set maximum value for numeric inputs
271
 */
272
fun AttrsScope<HTMLInputElement>.max(value: String)
273

274
/**
275
 * Set minimum text length
276
 */
277
fun AttrsScope<HTMLInputElement>.minLength(value: Int)
278

279
/**
280
 * Set maximum text length
281
 */
282
fun AttrsScope<HTMLInputElement>.maxLength(value: Int)
283

284
/**
285
 * Set numeric step for number inputs
286
 */
287
fun AttrsScope<HTMLInputElement>.step(value: Number)
288

289
/**
290
 * Set accepted file types for file inputs
291
 */
292
fun AttrsScope<HTMLInputElement>.accept(value: String)
293

294
/**
295
 * Allow multiple selection/files
296
 */
297
fun AttrsScope<HTMLInputElement>.multiple()
298

299
/**
300
 * Set input size (character width)
301
 */
302
fun AttrsScope<HTMLInputElement>.size(value: Int)
303
```
304

305
**Input Types:**
306

307
```kotlin { .api }
308
sealed class InputType<T>(val value: String)
309

310
object InputType {
311
    object Text : InputType<String>("text")
312
    object Password : InputType<String>("password")
313
    object Email : InputType<String>("email")
314
    object Url : InputType<String>("url")
315
    object Tel : InputType<String>("tel")
316
    object Search : InputType<String>("search")
317
    object Number : InputType<kotlin.Number>("number")
318
    object Range : InputType<kotlin.Number>("range")
319
    object Date : InputType<String>("date")
320
    object Time : InputType<String>("time")
321
    object Week : InputType<String>("week")
322
    object Month : InputType<String>("month")
323
    object DateTimeLocal : InputType<String>("datetime-local")
324
    object Checkbox : InputType<Boolean>("checkbox")
325
    object Radio : InputType<Boolean>("radio")
326
    object File : InputType<String>("file")
327
    object Hidden : InputType<String>("hidden")
328
    object Submit : InputType<Unit>("submit")
329
    object Reset : InputType<Unit>("reset")
330
    object Button : InputType<Unit>("button")
331
    object Image : InputType<Unit>("image")
332
    object Color : InputType<String>("color")
333
}
334
```
335

336
**Usage Examples:**
337

338
```kotlin
339
// Controlled text input
340
TextInput(
341
    value = inputValue,
342
    attrs = {
343
        placeholder("Enter your name")
344
        required()
345
        maxLength(50)
346
        onInput { event ->
347
            inputValue = event.value
348
        }
349
    }
350
)
351

352
// Number input with constraints
353
NumberInput(
354
    value = numberValue,
355
    attrs = {
356
        min("0")
357
        max("100")
358
        step(5)
359
        onInput { event ->
360
            numberValue = event.value.toIntOrNull() ?: 0
361
        }
362
    }
363
)
364

365
// File input
366
FileInput(
367
    attrs = {
368
        accept("image/*")
369
        multiple()
370
        onChange { event ->
371
            handleFileSelection(event.target.files)
372
        }
373
    }
374
)
375
```
376

377
### Form Element Attributes
378

379
Attributes specific to form containers and form controls.
380

381
```kotlin { .api }
382
/**
383
 * Set form action URL
384
 */
385
fun AttrsScope<HTMLFormElement>.action(value: String)
386

387
/**
388
 * Set HTTP method for form submission
389
 */
390
fun AttrsScope<HTMLFormElement>.method(value: FormMethod)
391

392
/**
393
 * Set form encoding type
394
 */
395
fun AttrsScope<HTMLFormElement>.encType(value: FormEncType)
396

397
/**
398
 * Set form target
399
 */
400
fun AttrsScope<HTMLFormElement>.target(value: FormTarget)
401

402
/**
403
 * Disable form validation
404
 */
405
fun AttrsScope<HTMLFormElement>.noValidate()
406

407
/**
408
 * Set autocomplete behavior
409
 */
410
fun AttrsScope<HTMLInputElement>.autoComplete(value: Boolean)
411
fun AttrsScope<HTMLInputElement>.autoComplete(value: AutoComplete)
412

413
/**
414
 * Set button type
415
 */
416
fun AttrsScope<HTMLButtonElement>.type(value: ButtonType)
417

418
/**
419
 * Override form action for button
420
 */
421
fun AttrsScope<HTMLButtonElement>.formAction(value: String)
422

423
/**
424
 * Override form method for button
425
 */
426
fun AttrsScope<HTMLButtonElement>.formMethod(value: FormMethod)
427

428
/**
429
 * Override form target for button
430
 */
431
fun AttrsScope<HTMLButtonElement>.formTarget(value: FormTarget)
432

433
/**
434
 * Set label target element
435
 */
436
fun AttrsScope<HTMLLabelElement>.forId(value: String)
437
```
438

439
**Form Attribute Types:**
440

441
```kotlin { .api }
442
enum class FormMethod(val value: String) {
443
    Get("get"),
444
    Post("post")
445
}
446

447
enum class FormEncType(val value: String) {
448
    ApplicationXWwwFormUrlencoded("application/x-www-form-urlencoded"),
449
    MultipartFormData("multipart/form-data"),
450
    TextPlain("text/plain")
451
}
452

453
enum class FormTarget(val value: String) {
454
    Self("_self"),
455
    Blank("_blank"),
456
    Parent("_parent"),
457
    Top("_top")
458
}
459

460
enum class ButtonType(val value: String) {
461
    Submit("submit"),
462
    Reset("reset"),
463
    Button("button")
464
}
465

466
enum class AutoComplete(val value: String) {
467
    On("on"),
468
    Off("off"),
469
    Name("name"),
470
    Email("email"),
471
    Username("username"),
472
    CurrentPassword("current-password"),
473
    NewPassword("new-password")
474
    // ... many more autocomplete values
475
}
476
```
477

478
### Link and Navigation Attributes
479

480
Attributes for links, navigation, and document relationships.
481

482
```kotlin { .api }
483
/**
484
 * Set link URL
485
 */
486
fun AttrsScope<HTMLAnchorElement>.href(value: String)
487

488
/**
489
 * Set link target
490
 */
491
fun AttrsScope<HTMLAnchorElement>.target(value: ATarget)
492

493
/**
494
 * Set download filename
495
 */
496
fun AttrsScope<HTMLAnchorElement>.download(value: String)
497

498
/**
499
 * Set link language
500
 */
501
fun AttrsScope<HTMLAnchorElement>.hreflang(value: String)
502

503
/**
504
 * Set link relationship
505
 */
506
fun AttrsScope<HTMLAnchorElement>.rel(value: String)
507

508
/**
509
 * Set link type
510
 */
511
fun AttrsScope<HTMLAnchorElement>.type(value: String)
512
```
513

514
**Link Target Types:**
515

516
```kotlin { .api }
517
enum class ATarget(val value: String) {
518
    Self("_self"),
519
    Blank("_blank"),
520
    Parent("_parent"),
521
    Top("_top")
522
}
523
```
524

525
**Usage Examples:**
526

527
```kotlin
528
A(
529
    href = "https://example.com",
530
    attrs = {
531
        target(ATarget.Blank)
532
        rel("noopener noreferrer")
533
        download("example-file.pdf")
534
    }
535
) {
536
    Text("Download Example")
537
}
538
```
539

540
### Media Attributes
541

542
Attributes for media elements including images, audio, and video.
543

544
```kotlin { .api }
545
/**
546
 * Set media source URL
547
 */
548
fun AttrsScope<HTMLImageElement>.src(value: String)
549
fun AttrsScope<HTMLAudioElement>.src(value: String)
550
fun AttrsScope<HTMLVideoElement>.src(value: String)
551

552
/**
553
 * Set alternative text for images
554
 */
555
fun AttrsScope<HTMLImageElement>.alt(value: String)
556

557
/**
558
 * Set media dimensions
559
 */
560
fun AttrsScope<HTMLImageElement>.width(value: Int)
561
fun AttrsScope<HTMLImageElement>.height(value: Int)
562
fun AttrsScope<HTMLVideoElement>.width(value: Int)
563
fun AttrsScope<HTMLVideoElement>.height(value: Int)
564

565
/**
566
 * Set loading behavior
567
 */
568
fun AttrsScope<HTMLImageElement>.loading(value: Loading)
569

570
/**
571
 * Set media controls
572
 */
573
fun AttrsScope<HTMLAudioElement>.controls()
574
fun AttrsScope<HTMLVideoElement>.controls()
575

576
/**
577
 * Set autoplay behavior
578
 */
579
fun AttrsScope<HTMLAudioElement>.autoplay()
580
fun AttrsScope<HTMLVideoElement>.autoplay()
581

582
/**
583
 * Set loop behavior
584
 */
585
fun AttrsScope<HTMLAudioElement>.loop()
586
fun AttrsScope<HTMLVideoElement>.loop()
587

588
/**
589
 * Set muted state
590
 */
591
fun AttrsScope<HTMLAudioElement>.muted()
592
fun AttrsScope<HTMLVideoElement>.muted()
593

594
/**
595
 * Set poster image for video
596
 */
597
fun AttrsScope<HTMLVideoElement>.poster(value: String)
598
```
599

600
**Media Attribute Types:**
601

602
```kotlin { .api }
603
enum class Loading(val value: String) {
604
    Eager("eager"),
605
    Lazy("lazy")
606
}
607
```
608

609
### Table Attributes
610

611
Attributes specific to table elements for data organization and accessibility.
612

613
```kotlin { .api }
614
/**
615
 * Set cell column span
616
 */
617
fun AttrsScope<HTMLTableCellElement>.colspan(value: Int)
618

619
/**
620
 * Set cell row span
621
 */
622
fun AttrsScope<HTMLTableCellElement>.rowspan(value: Int)
623

624
/**
625
 * Set header scope for accessibility
626
 */
627
fun AttrsScope<HTMLTableCellElement>.scope(value: Scope)
628

629
/**
630
 * Set column span for colgroup
631
 */
632
fun AttrsScope<HTMLTableColElement>.span(value: Int)
633
```
634

635
**Table Attribute Types:**
636

637
```kotlin { .api }
638
enum class Scope(val value: String) {
639
    Row("row"),
640
    Col("col"),
641
    Rowgroup("rowgroup"),
642
    Colgroup("colgroup")
643
}
644
```
645

646
**Usage Examples:**
647

648
```kotlin
649
Table {
650
    Thead {
651
        Tr {
652
            Th({ scope(Scope.Col) }) { Text("Name") }
653
            Th({ scope(Scope.Col) }) { Text("Age") }
654
            Th({ 
655
                scope(Scope.Col)
656
                colspan(2) 
657
            }) { Text("Contact") }
658
        }
659
    }
660
    Tbody {
661
        Tr {
662
            Td { Text("John") }
663
            Td { Text("25") }
664
            Td { Text("john@example.com") }
665
            Td { Text("555-1234") }
666
        }
667
    }
668
}
669
```
670

671
### Style Integration
672

673
Integration between attributes and CSS styling systems.
674

675
```kotlin { .api }
676
/**
677
 * Set inline styles using CSS-in-Kotlin
678
 */
679
fun AttrsScope<*>.style(builder: StyleScope.() -> Unit)
680

681
/**
682
 * Set CSS classes from stylesheet
683
 */
684
fun AttrsScope<*>.classes(vararg classNames: String)
685

686
/**
687
 * Set raw style attribute
688
 */
689
fun AttrsScope<*>.style(value: String)
690
```
691

692
**Usage Examples:**
693

694
```kotlin
695
Div({
696
    // Type-safe inline styles
697
    style {
698
        backgroundColor(Color.lightblue)
699
        padding(16.px)
700
        borderRadius(8.px)
701
        hover {
702
            backgroundColor(Color.blue)
703
        }
704
    }
705
    
706
    // CSS classes
707
    classes("container", "elevated")
708
    
709
    // Raw CSS (not recommended)
710
    style("margin: 10px; color: red;")
711
}) {
712
    Text("Styled content")
713
}
714
```
715

716
## Types
717

718
```kotlin { .api }
719
typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
720

721
interface AttrsScope<TElement>
722
class AttrsScopeBuilder<TElement> : AttrsScope<TElement>
723
```