feat: add required asterisk indicator to TextField component
All checks were successful
Test / test-frontend (pull_request) Successful in 22s
Test / lint-frontend (pull_request) Successful in 25s
Test / frontend-build (pull_request) Successful in 29s
Verify / verify-generated-code (pull_request) Successful in 56s
Test / test (pull_request) Successful in 46s
Verify / verify-openapi-spec (pull_request) Successful in 57s
Verify / verify-frontend-api-client (pull_request) Successful in 22s
Test / lint (pull_request) Successful in 1m6s
All checks were successful
Test / test-frontend (pull_request) Successful in 22s
Test / lint-frontend (pull_request) Successful in 25s
Test / frontend-build (pull_request) Successful in 29s
Verify / verify-generated-code (pull_request) Successful in 56s
Test / test (pull_request) Successful in 46s
Verify / verify-openapi-spec (pull_request) Successful in 57s
Verify / verify-frontend-api-client (pull_request) Successful in 22s
Test / lint (pull_request) Successful in 1m6s
This commit is contained in:
@@ -2,6 +2,7 @@ import type { AnyFieldMeta } from '@tanstack/react-form';
|
|||||||
import { LucideEye, LucideEyeClosed } from 'lucide-react';
|
import { LucideEye, LucideEyeClosed } from 'lucide-react';
|
||||||
import { useCallback, useId, useState } from 'react';
|
import { useCallback, useId, useState } from 'react';
|
||||||
import { InfoIcon, type InfoIconProps } from '../info';
|
import { InfoIcon, type InfoIconProps } from '../info';
|
||||||
|
import { Text } from '@radix-ui/themes';
|
||||||
|
|
||||||
export type TextFieldProps = {
|
export type TextFieldProps = {
|
||||||
label?: string;
|
label?: string;
|
||||||
@@ -32,6 +33,11 @@ export function TextField({ label, value, onChange, labelProps, labelDivProps, s
|
|||||||
{label && (
|
{label && (
|
||||||
<div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}>
|
<div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}>
|
||||||
{label}
|
{label}
|
||||||
|
{rest?.required && (
|
||||||
|
<Text size="3" style={{ color: 'var(--red-9)', marginLeft: 2 }}>
|
||||||
|
*
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
{infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />}
|
{infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user