본문으로 건너뛰기

숫자 필드

숫자를 입력할 수 있습니다. 입력 데이터는 다른 워크플로우나 컴포넌트에서 사용할 수 있습니다.

프로퍼티​

프로퍼티타입설명
이름 (name)string숫자 필드 컴포넌트의 고유 이름
레이블 (label)string숫자 필드 좌측에 표기되는 텍스트
기본값 (defaultValue)string숫자 필드에 적용되는 기본값 템플릿
형식 (format)NumberFieldFormat숫자가 표시되는 형식
소수점 자릿수 (decimalPlaces)number0부터 20사이의 소수점 자릿수
소수점 자릿수 채우기 (isDecimalPlacesFilled)boolean설정된 소수점 자릿수만큼 0으로 채우는 기능 활성화 여부
콤마 표시 여부 (useGrouping)boolean1,000의 자리마다 콤마 표시 여부
유효성 검사 (validator)string1,000의 자리마다 콤마 표시 여부
플레이스홀더 (placeholder)string숫자 필드에 적용되는 플레이스홀더
컴포넌트 비활성화 (isDisabled)boolean숫자 필드 비활성화 여부
컴포넌트 숨김 (isHidden)boolean배포된 페이지에서 숫자 필드 숨김 여부
레이블 길이 (labelWidth)string숫자 필드에서 좌측 레이블이 차지하는 길이
정렬 (textAlign)'left' | 'right'필드 내부 데이터를 정렬합니다.

이름 (name)​

숫자 필드 컴포넌트의 고유 이름을 입력할 수 있는 프로퍼티입니다. 이름 규칙을 참고해주세요.

레이블 (label)​

숫자 필드 좌측에 표기되는 텍스트를 입력할 수 있는 프로퍼티입니다. (템플릿 텍스트 입력 가능)

기본값 (defaultValue)​

워크플로우의 실행 결과로 옵션을 추가하거나 코드 또는 직접 값을 입력하여 기본값을 설정할 수 있습니다.

형식 (format)​

숫자를 표시하는 방법입니다.
일반, 퍼센트, 통화 형식을 선택할 수 있습니다.

형식을 변경해도 상태 값은 변경되지 않습니다.

소수점 자릿수 (decimalPlaces)​

최대 소수점 자리를 지정합니다. 0부터 20사이의 소수점 자리수를 입력할 수 있습니다.

소수점 자릿수 채우기 (isDecimalPlacesFilled)​

스위치를 활성화하면 입력한 값의 소수점 자릿수가 설정된 소수점 자릿수보다 적을 경우 나머지 자릿수를 0으로 채웁니다.

콤마 표시 여부 (useGrouping)​

스위치를 활성화하면 1,000의 자리마다 콤마를 표시합니다.

유효성 검사 (validator)​

워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 유효성 검사를 설정할 수 있습니다.
필드 값의 유효성을 검사하고 에러 메시지를 표시할 수 있습니다.

다음과 같이 true, false를 반환하는 조건을 입력할 경우 기본 에러메세지가 표시됩니다.

value !== 'Hello World'

삼항 연산자를 이용해 원하는 에러 메세지를 입력할 수 있습니다.

value !== 'Hello World' ?  "value is not Hello World" : undefined

플레이스홀더 (placeholder)​

직접 값을 입력하여 필드의 플레이스홀더를 설정할 수 있습니다. 플레이스홀더를 설정하지 않으면 각 필드의 기본 플레이스홀더가 표시됩니다.

컴포넌트 비활성화 (isDisabled)​

컴포넌트의 비활성화 상태를 입력하는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 컴포넌트 비활성화 상태를 설정할 수 있습니다. 값을 true로 설정할 경우, 해당 컴포넌트가 비활성화 상태로 변경됩니다.

컴포넌트 숨김 (isHidden)​

컴포넌트의 숨김 상태를 입력하는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 컴포넌트 숨김 상태를 설정할 수 있습니다.
값을 true로 설정할 경우, 배포된 상태에서는 컴포넌트가 숨겨지고 편집 상태에서는 불투명한 상태로 편집이 가능합니다.

레이블 길이 (labelWidth)​

레이블 길이를 입력할 수 있는 프로퍼티입니다. px 또는 % 단위에 맞게 값을 입력하면 해당 값에 따라 레이블의 길이가 조정됩니다.

정렬 (textAlign)​

필드 내부 데이터를 선택한 방향에 맞게 정렬합니다.

상태​

프로퍼티타입설명
값 (value)number숫자 필드의 value

타입 정의​

type NumberFieldFormat = 'general' | 'percent' | 'currency';