File tree Expand file tree Collapse file tree 2 files changed +14
-6
lines changed
src/design-system/text-box Expand file tree Collapse file tree 2 files changed +14
-6
lines changed Original file line number Diff line number Diff line change @@ -14,7 +14,7 @@ import type { Sx } from '../../design-tokens';
14
14
export interface TextBoxProps extends Form . FormControlProps {
15
15
required ?: boolean ;
16
16
disabled ?: boolean ;
17
- id ? : string ;
17
+ id : string ;
18
18
label : string ;
19
19
name ?: string ;
20
20
defaultValue ?: string ;
@@ -67,7 +67,9 @@ export const TextBox = ({
67
67
data-testid = { rest [ 'data-testid' ] }
68
68
/>
69
69
</ Form . Control >
70
- < Form . Label className = { cn ( cx . label ) } > { label } </ Form . Label >
70
+ < Form . Label htmlFor = { id } className = { cn ( cx . label ) } >
71
+ { label }
72
+ </ Form . Label >
71
73
</ Form . Field >
72
74
</ Flex >
73
75
{ errorMessage && (
Original file line number Diff line number Diff line change @@ -24,19 +24,24 @@ export default {
24
24
const MainComponents = ( ) : JSX . Element => (
25
25
< Variants . Row >
26
26
< Variants . Cell >
27
- < TextBox label = "Label" value = "" />
27
+ < TextBox label = "Label" value = "" id = "empty" />
28
28
</ Variants . Cell >
29
29
< Variants . Cell >
30
30
< TextBox label = "Label" value = "" id = "hover" />
31
31
</ Variants . Cell >
32
32
< Variants . Cell >
33
- < TextBox label = "Label" value = "Input Text" />
33
+ < TextBox label = "Label" value = "Input Text" id = "with-value" />
34
34
</ Variants . Cell >
35
35
< Variants . Cell >
36
- < TextBox label = "Label" value = "Input Text" errorMessage = "Error" />
36
+ < TextBox
37
+ label = "Label"
38
+ value = "Input Text"
39
+ errorMessage = "Error"
40
+ id = "with-error"
41
+ />
37
42
</ Variants . Cell >
38
43
< Variants . Cell >
39
- < TextBox label = "Label" value = "Input Text" disabled />
44
+ < TextBox label = "Label" value = "Input Text" disabled id = "disabled" />
40
45
</ Variants . Cell >
41
46
< Variants . Cell >
42
47
< TextBox label = "Label" value = "" id = "focus" />
@@ -53,6 +58,7 @@ export const Overview = (): JSX.Element => {
53
58
< Section title = "Copy for use" >
54
59
< Flex flexDirection = "column" alignItems = "center" w = "$fill" my = "$32" >
55
60
< TextBox
61
+ id = "default"
56
62
value = { value }
57
63
label = "Text"
58
64
onChange = { ( event ) : void => {
You can’t perform that action at this time.
0 commit comments