Component · Forms

Input

single-line text entry. quiet at rest, with a clear slate focus ring and gentle semantic states. driven below through its real attributes.

Playground

state
size
clearable 
 
 
 
Where available
 
 
 ✓ React 
 ✓ Angular 
 ✓ Web Components 
 ✓ Blazor 
 ✓ Tokens 
 
 
Using it
 
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
 
 
 
TargetReferencePackage
  
 React <TextInput> @design-foundry/lucent-react 
 Angular <lucent-text-input> @design-foundry/lucent 
 Web Components <lucent-text-input> @design-foundry/lucent-wc 
 Blazor <LucentTextInput> DesignFoundry.Lucent 
  
 
  
API
 
 
 
PropTypeDefaultDescription
  
 value string — controlled value. 
 label string — field label. 
 hint string — helper text below the field. 
 error string — error message; sets the error state. 
 leading-icon string — Material Round glyph in the field. 
 size xs | sm | md | lg md control density. 
 clearable boolean false shows a clear button when filled.