Components / Form & Input / Input
Input stable
Labels, helper text, error states and a search variant. A focus ring wraps the field.
Used for invoice delivery
Please enter your full name
<div class="field"><label for="f-email">Email</label><input class="input" id="f-email" placeholder="[email protected]"><span class="hint">Used for invoice delivery</span></div> <div class="field"><label for="f-name">Full name</label><input class="input errb" id="f-name" value="tanaka"><span class="err">Please enter your full name</span></div> <div class="field"><label for="f-search">Search</label><span class="searchwrap"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--k-ink-3)"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg><input class="input" id="f-search" placeholder="Search components…"></span></div>
.field{display:flex;flex-direction:column;gap:6px;min-width:230px;flex:1;max-width:300px;font-family:var(--k-font)}
.field label{font-size:12.5px;font-weight:500;color:var(--k-ink)}
.field .hint{font-size:12px;color:var(--k-ink-3)}
.field .err{font-size:12px;color:var(--k-danger)}
.input{height:38px;border:1px solid var(--k-line);border-radius:var(--k-radius);padding:0 12px;font-family:var(--k-font);font-size:13.5px;background:var(--k-bg);color:var(--k-ink);box-shadow:0 1px 2px rgba(16,24,40,.04);width:100%}
.input::placeholder{color:var(--k-ink-3)}
.input:focus{outline:0;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.input.errb{border-color:var(--k-danger)}
.input.errb:focus{box-shadow:var(--k-ring-danger)}
.searchwrap{position:relative;display:block}
.searchwrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
.searchwrap .input{padding-left:34px}
Usage
Always pair with a visible label. Put helper text under the field; replace it with the error message when validation fails.
Accessibility
Labels are real <label> elements. The error state uses color plus text — never color alone.