Input

Playground

'use client';
import { useId, useState } from 'react';
import { Input, Field, Icon, type InputSize } from '@mbsw/ui';
import { Search } from 'lucide-react';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "readOnly": false,
    "invalid": false,
    "placeholder": "텍스트를 입력해 주세요.",
    "size": "md",
    "disabled": false
  };
  const [value, setValue] = useState('');
  const errorId = useId();
  const hasError = settings.invalid;
  return (
    <div style={{ display: 'grid', gap: 4, width: 280, maxWidth: '100%' }}>
      <Input
        clearLabel={"입력값 지우기"}
        aria-label={"텍스트"}
        readOnly={settings.readOnly}
        leadingIcon={
          settings.leadingIcon ? (
            <Icon icon={Search} size="sm" decorative />
          ) : undefined
        }
        aria-invalid={hasError || undefined}
        aria-describedby={hasError ? errorId : undefined}
        placeholder={settings.placeholder}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        disabled={settings.disabled}
        size={settings.size as InputSize}
      />
      {hasError && (
        <Field id={errorId} status="error" message="Error message" />
      )}
    </div>
  );
}

Properties

Size

Leading icon

Read only

Error

Disabled

Content

Placeholder

Usage

입력에 label을 연결하거나 aria-label로 이름을 제공합니다. Field는 상태 메시지와 글자 수를 표시하는 별도 요소입니다. 오류 메시지는 aria-describedby로 입력과 연결합니다.

'use client';
import { Input } from '@mbsw/ui';

export default function Example() {
  return (
    <Input
      clearLabel={"입력값 지우기"}
      aria-label={"텍스트"}
      placeholder={"텍스트를 입력해 주세요."}
    />
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

FieldInput