बहु-लाइन इनपुट

कति लामो हुने थाहा नभएको मान लिन — अनुरोध, कारण, टिपोट जस्ता वाक्यमा लेखिने कुरा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<div class="dc-ta">
  <label class="dc-ta__label" for="dc-ta-note">배송 요청사항</label>
  <textarea class="dc-ta__input" id="dc-ta-note" name="note" rows="4" placeholder="부재 시 경비실에 맡겨 주세요" aria-describedby="dc-ta-note-help dc-ta-note-count"></textarea>
  <div class="dc-ta__foot">
    <p class="dc-ta__help" id="dc-ta-note-help">기사님께 그대로 전달됩니다.</p>
    <span class="dc-ta__count" id="dc-ta-note-count">0 / 200</span>
  </div>
</div>

.dc-ta {
  display: flex; flex-direction: column; gap: var(--dc-2);
  max-width: 460px; font-family: var(--dc-font);
}
.dc-ta__label { font-size: 14px; font-weight: 600; color: var(--dc-text); }
.dc-ta__input {
  width: 100%; min-height: 112px; padding: var(--dc-3);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 15px; line-height: 1.6;
  resize: vertical;
  transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-ta__input::placeholder { color: var(--dc-text-mute); }
.dc-ta__input:hover { border-color: var(--dc-line-bold); }
.dc-ta__input:focus {
  outline: none; border-color: var(--dc-brand);
  box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
.dc-ta__input[aria-invalid="true"] { border-color: var(--dc-danger); }
.dc-ta__input[disabled] {
  background: var(--dc-sunken); color: var(--dc-text-mute);
  border-color: var(--dc-line); resize: none; cursor: not-allowed;
}
.dc-ta__foot {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--dc-3);
}
.dc-ta__help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-ta__error {
  margin: 0; display: flex; align-items: flex-start; gap: var(--dc-1);
  font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--dc-danger);
}
.dc-ta__count {
  flex: none; font-family: var(--dc-mono); font-size: 13px; line-height: 1.5;
  color: var(--dc-text-mute); font-variant-numeric: tabular-nums;
}
.dc-ta__count--over { color: var(--dc-danger); font-weight: 700; }
.dc-ta--compact .dc-ta__input { min-height: 64px; font-size: 14px; }

कसरी प्रयोग गर्ने

देखिने लाइन सङ्ख्याले अपेक्षित लम्बाइ बताउँछ: दुई लाइन छोटो, छ लाइन लामो लेख्न मिल्छ
अक्षर सीमा छ भने बाँकी सङ्ख्या सुरुदेखि देखाउनुहोस् — कडा maxlength ले टाँसेको पाठ चुपचाप काटिदिन्छ
ठाडो आकार मिलाउने सुविधा बन्द गर्नु हुँदैन — लामो लेख्ने आफैँ तानेर बढाउँछ

ध्यान दिनुपर्ने कुरा

काउन्टर रातो बनाएरै छोड्नु हुँदैन — कति घटाउने हो पाठमा लेख्नुहोस्
resize: horizontal छेउको भाग धकेल्छ र लेआउट बिगार्छ

अर्को

एप इनपुट बाकस इनपुट एप

प्रमाणीकरण कोडका ६ बाकस इनपुट एप

तल्लो खोज बार इनपुट एप

रकम इनपुट इनपुट एप