Skip to content

Commit e948053

Browse files
committed
fix: resolve issue 'The label's for attribute doesn't match any element id'
1 parent 414f81c commit e948053

File tree

2 files changed

+14
-6
lines changed

2 files changed

+14
-6
lines changed

src/design-system/text-box/text-box.component.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { Sx } from '../../design-tokens';
1414
export interface TextBoxProps extends Form.FormControlProps {
1515
required?: boolean;
1616
disabled?: boolean;
17-
id?: string;
17+
id: string;
1818
label: string;
1919
name?: string;
2020
defaultValue?: string;
@@ -67,7 +67,9 @@ export const TextBox = ({
6767
data-testid={rest['data-testid']}
6868
/>
6969
</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>
7173
</Form.Field>
7274
</Flex>
7375
{errorMessage && (

src/design-system/text-box/text-box.stories.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,24 @@ export default {
2424
const MainComponents = (): JSX.Element => (
2525
<Variants.Row>
2626
<Variants.Cell>
27-
<TextBox label="Label" value="" />
27+
<TextBox label="Label" value="" id="empty" />
2828
</Variants.Cell>
2929
<Variants.Cell>
3030
<TextBox label="Label" value="" id="hover" />
3131
</Variants.Cell>
3232
<Variants.Cell>
33-
<TextBox label="Label" value="Input Text" />
33+
<TextBox label="Label" value="Input Text" id="with-value" />
3434
</Variants.Cell>
3535
<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+
/>
3742
</Variants.Cell>
3843
<Variants.Cell>
39-
<TextBox label="Label" value="Input Text" disabled />
44+
<TextBox label="Label" value="Input Text" disabled id="disabled" />
4045
</Variants.Cell>
4146
<Variants.Cell>
4247
<TextBox label="Label" value="" id="focus" />
@@ -53,6 +58,7 @@ export const Overview = (): JSX.Element => {
5358
<Section title="Copy for use">
5459
<Flex flexDirection="column" alignItems="center" w="$fill" my="$32">
5560
<TextBox
61+
id="default"
5662
value={value}
5763
label="Text"
5864
onChange={(event): void => {

0 commit comments

Comments
 (0)