텍스트 박스 (Textbox)

텍스트 박스 컴포넌트는 주로 사용자로부터 텍스트를 입력받기 위해 사용됩니다.

• 전체 컴포넌트
• 이슈 제출하기

Overview

Type

outline, underline 타입이 제공되며, underline의 경우 텍스트 입력이 가능한 input 태그에 한하여 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Input

OutlineType UnderlineType

Textarea

OutlineType

Status

focus, success, warning, disabled 상태가 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Focus

OutlineType UnderlineType

OutlineType

Success

OutlineType UnderlineType

OutlineType

Warning

OutlineType UnderlineType

OutlineType

Disabled

OutlineType UnderlineType

OutlineType

Label

라벨을 텍스트박스의 상단 또는 하단에 위치시킬 수 있습니다. 자세한 내용을 보려면 여기를 클릭하세요.

Top

OutlineType UnderlineType

OutlineType

Bottom

OutlineType UnderlineType

OutlineType

Usage

텍스트 박스 컴포넌트는 텍스트 입력이 가능한 input 태그 또는 textarea 태그에 n-textbox 클래스를 적용하여 사용할 수 있습니다.
또한, 텍스트 박스의 크기를 조정하려면 유틸 클래스의 resize속성을 사용할 수 있습니다. 자세한 내용은 여기를 참고해주세요.

Input

<input type="text" class="n-textbox" placeholder="Basic Textbox" />

Textarea

<textarea type="text" class="n-textbox" placeholder="Basic Textbox"></textarea>

Type

텍스트 박스 컴포넌트는 기본적으로 outline 스타일이 적용되며, input 태그에는 추가로 underline 스타일을 제공합니다. input 태그에 n-textbox-type:타입명 또는 n-textbox:타입명과 같은 약어 클래스를 사용하여 텍스트 박스에 원하는 스타일을 적용할 수 있습니다.

Input

<input
  type="text"
  class="n-textbox n-textbox-type:outline"
  placeholder="Outline Textbox" />
<input
  type="text"
  class="n-textbox n-textbox-type:underline"
  placeholder="Underline Textbox" />

타입	클래스	약어 클래스	변수
outline	n-textbox-type:outline	n-textbox:outline
underline	n-textbox-type:underline	n-textbox:underline	.n-textbox { --textbox-underline-border-width: 1.6px; }

Textarea

<textarea
  type="text"
  class="n-textbox n-textbox-type:outline"
  placeholder="Outline Textbox"></textarea>

타입	클래스	약어 클래스
outline	n-textbox-type:outline	n-textbox:outline

Status

입력된 텍스트의 유효성에 따라 focus, success, warning, disabled 상태를 적용할 수 있으며, input 태그와 textarea 태그 모두 동일하게 적용됩니다.

Focus

codes

<input
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:focus"
  placeholder="Outline Focus" />
<input
  type="text"
  class="n-textbox n-textbox-type:underline n-textbox-status:focus"
  placeholder="Underline Focus" />
<textarea
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:focus"
  placeholder="Outline Focus"></textarea>

클래스	변수
n-textbox-status:success	.n-textbox { --textbox-border-color-focus: var(--color-sub-2); }

Success

codes

<input
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:success"
  placeholder="Outline Success" />
<input
  type="text"
  class="n-textbox n-textbox-type:underline n-textbox-status:success"
  placeholder="Underline Success" />
<textarea
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:success"
  placeholder="Outline Success"></textarea>

클래스	변수
n-textbox-status:success	.n-textbox { --textbox-border-color-success: #37b24d; }

Warning

codes

<input
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:warning"
  placeholder="Outline Warning" />
<input
  type="text"
  class="n-textbox n-textbox-type:underline n-textbox-status:warning"
  placeholder="Underline Warning" />
<textarea
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:warning"
  placeholder="Outline Warning"></textarea>

클래스	변수
n-textbox-status:warning	.n-textbox { --textbox-color-warning: var(--color-accent-1); --textbox-border-color-warning: var(--color-accent-1); }

Disabled

codes

<input
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:disabled"
  placeholder="Outline Disabled" />
<input
  type="text"
  class="n-textbox n-textbox-type:underline n-textbox-status:disabled"
  placeholder="Underline Disabled" />
<textarea
  type="text"
  class="n-textbox n-textbox-type:outline n-textbox-status:disabled"
  placeholder="Outline Disabled"></textarea>

클래스	변수
n-textbox-status:disabled

Label

n-textbox-label:값 클래스를 적용하여 라벨을 텍스트 박스의 상단 또는 하단에 위치시킬 수 있습니다.

Top

label

label

label

codes

<label>
  label
  <input
    type="text"
    class="n-textbox n-textbox-type:outline
    n-textbox-label:top"
    placeholder="Placeholder" />
</label>
<label>
  label
  <input
    type="text"
    class="n-textbox n-textbox-type:underline
    n-textbox-label:top"
    placeholder="Placeholder" />
</label>
<label>
  label
  <textarea
    type="text"
    class="n-textbox n-textbox-type:outline
    n-textbox-label:top"
    placeholder="Placeholder"></textarea>
</label>

클래스	변수
n-textbox-label:top

Bottom

label

label

label

codes

<label>
  label
  <input
    type="text"
    class="n-textbox n-textbox-type:outline
    n-textbox-label:bottom"
    placeholder="Placeholder" />
</label>
<label>
  label
  <input
    type="text"
    class="n-textbox n-textbox-type:underline
    n-textbox-label:bottom"
    placeholder="Placeholder" />
</label>
<label>
  label
  <textarea
    type="text"
    class="n-textbox n-textbox-type:outline
    n-textbox-label:bottom"
    placeholder="Placeholder"></textarea>
</label>

클래스	변수
n-textbox-label:bottom

Overriding

텍스트 박스 컴포넌트는 스타일 재정의에 대한 변수를 아래와 같이 제공하고 있습니다.

/* textbox.css */
.n-textbox {
  /* textbox-size */
  --textbox-padding-x: 12px;
  --textbox-input-height: 36px;
  --textbox-textarea-min-height: 58px;
  
  /* textbox-border-color */
  --textbox-border-color: var(--color-base-3);
  
  /* textbox-border-radius */
  --textbox-border-radius: 6px;

  /* textbox-border-width */
  --textbox-underline-border-width: 1.6px;

  /* textbox-status:focus */
  --textbox-border-color-focus: var(--color-sub-2);

  /* textbox-status:success */
  --textbox-border-color-success: #37b24d;

  /* textbox-status:warning */
  --textbox-color-warning: var(--color-accent-1);
  --textbox-border-color-warning: var(--color-accent-1);
}

Example

Default Focus Success Warning

<label>
  Default
  <input
    type="text"
    class="n-textbox n-textbox-label:top"
    placeholder="Outline Textbox" />
</label>
<label>
  Focus
  <input
    type="text"
    class="n-textbox n-textbox-status:focus n-textbox-label:top"
    placeholder="Outline Textbox" />
</label>
<label>
  Success
  <input
    type="text"
    class="n-textbox n-textbox:underline  n-textbox-status:success n-textbox-label:top"
    placeholder="Underline Textbox" />
</label>
<label>
  Warning
  <textarea
    type="text"
    class="n-textbox n-textbox-status:warning n-textbox-label:top"
    placeholder="Outline Textbox"></textarea>
</label>

/* root.css */
.n-textbox {
  /* textbox-size */
  --textbox-padding-x: 14px;
  --textbox-input-height: 40px;
  --textbox-textarea-min-height: 80px;

  /* textbox-border-color */
  --textbox-border-color: var(--color-base-10);

  /* textbox-border-radius */
  --textbox-border-radius: 12px;

  /* textbox-border-width */
  --textbox-underline-border-width: 1px;

  /* textbox-status:focus */
  --textbox-border-color-focus: #3b82f680;

  /* textbox-status:success */
  --textbox-border-color-success: #06b6d4;

  /* textbox-status:warning */
  --textbox-color-warning: #f97316;
  --textbox-border-color-warning: #f97316;
}

TIP

컴포넌트 커스터마이징에 대한 자세한 내용은 컴포넌트 커스터마이징하기에서 확인하실 수 있습니다.

Example

회원가입

Newtil CSS

아이디 비밀번호 newtilCSS를 알게 된 경로를 자세히 작성해주세요!

codes

<header class="d:flex jc:center">
  <h1 class="d:none">회원가입</h1>
  <div>
    <a href="/newtil-css" class="d:flex fl-dir:column ai:center">
      <img src="/logo.png" width="50px" height="50px" />
      <span class="n-font:h3">Newtil CSS</span>
    </a>
  </div>
</header>
<form class="w:100p d:flex fl-dir:column ai:center gap:4">
  <label>
    아이디
    <input
      type="text"
      class="n-textbox n-textbox-label:top"
      placeholder="email@newtil.com" />
  </label>
  <label>
    비밀번호
    <input
      type="password"
      class="n-textbox n-textbox-label:top"
      placeholder="비밀번호를 입력해주세요" />
  </label>
  <label>
    newtilCSS를 알게 된 경로를 자세히 작성해주세요!
    <textarea
      class="n-textbox n-textbox-label:top"
      placeholder="newtilCSS를 알게 된 경로를 자세히 작성해주세요!"></textarea>
  </label>
  <span>
    <button class="n-btn">제출하기</button>
  </span>
</form>

• 전체 컴포넌트
• 이슈 제출하기