Input

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

Field
Input

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

Field

Field 속성
PropType필수 여부
messageReactNode필수
status'default' | 'success' | 'error'선택
currentLengthnumber조건부
maxLengthnumber조건부

Input

Input 속성
PropType필수 여부
clearLabelstring선택
leadingIconReactElement<unknown, string | JSXElementConstructor<any>>선택
sizenumber | 'lg' | 'md' | 'sm' | 'xs'선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type Ref } from 'react';

export type InputSize = 'lg' | 'md' | 'sm' | 'xs';

export type FieldStatus = 'default' | 'success' | 'error';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & DataAttributes & {
    clearLabel?: string;
    leadingIcon?: ReactElement;
    size?: InputSize | number;
};

type FieldBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & DataAttributes & {
    message: ReactNode;
    status?: FieldStatus;
};

type FieldWithCounterProps = {
    currentLength: number;
    maxLength: number;
};

type FieldWithoutCounterProps = {
    currentLength?: never;
    maxLength?: never;
};

export type FieldProps = FieldBaseProps & (FieldWithCounterProps | FieldWithoutCounterProps);

export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & DataAttributes & {
    clearLabel?: string;
    leadingIcon?: ReactElement;
    size?: InputSize | number;
} & import("react").RefAttributes<HTMLInputElement>>;

export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;