forked from clerk/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbackup-code-field.tsx
More file actions
40 lines (37 loc) · 1.08 KB
/
Copy pathbackup-code-field.tsx
File metadata and controls
40 lines (37 loc) · 1.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import * as Common from '@clerk/elements/common';
import React from 'react';
import { useLocalizations } from '~/hooks/use-localizations';
import * as Field from '~/primitives/field';
export function BackupCodeField(props: Omit<React.ComponentProps<typeof Common.Input>, 'type'>) {
const { t } = useLocalizations();
return (
<Common.Field
name='backup_code'
asChild
>
<Field.Root>
<Common.Label asChild>
<Field.Label>{t('formFieldLabel__backupCode')}</Field.Label>
</Common.Label>
<Common.FieldState>
{({ state }) => {
return (
<Common.Input
type='text'
{...props}
asChild
>
<Field.Input intent={state} />
</Common.Input>
);
}}
</Common.FieldState>
<Common.FieldError asChild>
{({ message }) => {
return <Field.Message intent='error'>{message}</Field.Message>;
}}
</Common.FieldError>
</Field.Root>
</Common.Field>
);
}