Input

single-line text entry. quiet at rest, with a clear focus ring and gentle semantic states.

Usage

Single-line text entry. Quiet at rest, with a clear focus ring and gentle semantic states. A field is a label plus an input: the label is not optional, and the hint carries anything the user needs before they type.

we'll only use this for your beta invite.
<div class="lucent-text-input lucent-text-input--md">
  <label class="lucent-text-input__label typography-caption" for="ti-163">Work email</label>
  <div class="lucent-text-input__wrapper">
    <input id="ti-163" type="text" placeholder="studio@designfoundry.co" aria-describedby="ti-163-msg" />
  </div>
  <span class="lucent-text-input__message" id="ti-163-msg">we'll only use this for your beta invite.</span>
</div>

In Angular, label, hint and error are projected content rather than inputs. The field implements ControlValueAccessor, so ngModel and reactive forms set its value and disabled state. In HTML, focus and filled states are pure CSS (:focus-within, :placeholder-shown), so a plain <input> inside the wrapper needs no script.

States

A filled value, or an error message that switches the field to the error styling and sets aria-invalid.

enter a complete email address (you're missing the domain).

Prefix icon

<lucent-text-input placeholder="search the system">
  <span lucentLabel>Search</span>
  <lucent-icon lucentPrefix name="search" size="sm" />
</lucent-text-input>

Clearable

With clearable, a clear button appears once the field has a value.

Playground

used for your beta invite.
state
size
clearable 
 
 
  
Do & Don't
 
 
 
 
check_circleDo
 
Always pair a field with a visible label.
 
 
 
cancelDon't
 
Use the placeholder as the label; it disappears the moment someone types.
 
 
 
 
check_circleDo
 
Write errors that say how to fix the problem, not just that one exists.
 
 
 
cancelDon't
 
Show a generic "Invalid input".
 
 
 
 
check_circleDo
 
Add a prefix icon only when it aids recognition: search, email, a lock.
 
 
 
cancelDon't
 
Decorate every field with an icon; it turns into noise.
 
 
 
 
Using it
 
 
  
 Angular  lucent-text-input 
import { LucentTextInput } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-text-input 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 size input xs | sm | md | lg md control density. 
 placeholder input string '' placeholder text. 
 type input string text native input type. 
 readonly input boolean false read-only field. 
 clearable input boolean false shows a clear button once the field has a value. 
 cleared output void  emits after the clear button empties the field. 
  
 
  
Slots
 
 
 
AttributeDescription
  
 lucentLabel field label. 
 lucentHint helper text below the field. 
 lucentError error message; its presence sets the error state. 
 lucentPrefix leading content inside the field, usually a lucent-icon. 
 lucentSuffix trailing content inside the field. 
  
 
  
Theming
 
Field height, border, the focus ring and every semantic state colour flow from these tokens. Override the error and success roles to match your product's validation language.
 
 
Color (11)
  
 
Size & spacing (20)
  
 
Border & radius (3)
  
 
Type (3)