A text input allows users to enter any combination of letters, numbers, or symbols.
When to use
When you need to receive brief text-based input from a user.
Anatomy
1. Label
2. Placeholder
3. Leading Icon
4. Assistive Text
5. Text box (required)
6. Trailing Icon
Examples
<h2 class="headline-text__md mb-3">Default</h2>
<!-- Text Input Only -->
<div class="ucla-field">
<label class="ucla-field__label" for="exampleTextField">Label</label>
<div class="ucla-field__control">
<input
class="ucla-field__input"
id="exampleTextField"
type="text"
placeholder="Text input"
aria-describedby="uclaAssistiveText"
/>
</div>
<p class="ucla-field__help" id="uclaAssistiveText">Assistive text goes here</p>
</div>
<h2 class="headline-text__md mb-3">Warning</h2>
<!-- Text Input Only -->
<div class="ucla-field ucla-is-warning">
<label class="ucla-field__label" for="exampleTextFieldWarning">Label</label>
<div class="ucla-field__control">
<input
class="ucla-field__input"
id="exampleTextFieldWarning"
type="text"
value="Warning State"
placeholder="Text input"
aria-describedby="uclaWarningText"
/>
</div>
<p class="ucla-field__help" id="uclaWarningText">Security is not strong,
consider using a password that is over 8 characters with a mix of letters,
numbers, and special characters</p>
</div>
<h2 class="headline-text__md mb-3">Error</h2>
<!-- Text Input Only -->
<div class="ucla-field ucla-is-error">
<label class="ucla-field__label" for="exampleTextFieldError">Label</label>
<div class="ucla-field__control">
<input
class="ucla-field__input"
id="exampleTextFieldError"
type="text"
value="Error State"
placeholder="Text input"
aria-describedby="uclaErrorText"
/>
</div>
<p class="ucla-field__help" id="uclaErrorText">Your username is invalid.</p>
</div>
<h2 class="headline-text__md mb-3">Disabled</h2>
<!-- Text Input Only -->
<div class="ucla-field">
<label class="ucla-field__label" for="exampleTextFieldDisabled">Label</label>
<div class="ucla-field__control">
<input
class="ucla-field__input"
id="exampleTextFieldDisabled"
type="text"
value="Disabled State"
placeholder="Text input"
disabled
/>
</div>
</div>
<h2 class="headline-text__md mb-3">Readonly</h2>
<!-- Text Input Only -->
<div class="ucla-field">
<label class="ucla-field__label" for="exampleTextFieldReadonly">Label</label>
<div class="ucla-field__control">
<input
class="ucla-field__input"
id="exampleTextFieldReadonly"
type="text"
value="This text is readonly"
readonly
/>
</div>
<p class="ucla-field__help">Assistive text goes here</p>
</div>
<h2 class="headline-text__md mb-3">Icons</h2>
<!-- Text Input Only -->
<div class="ucla-field">
<label class="ucla-field__label" for="exampleIconLeft">Label</label>
<div class="ucla-field__control ucla-has-left-icon">
<input
class="ucla-field__input"
id="exampleIconLeft"
type="text"
placeholder="Text input"
/>
<span class="ucla-field__icon-left">
<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 16L0 0L20 0L20 16L0 16ZM10 9L18 4V2L10 7L2 2L2 4L10 9Z"
fill="#333333"
/>
</svg>
</span>
</div>
</div>
<div class="ucla-field">
<label class="ucla-field__label" for="exampleIconRight">Label</label>
<div class="ucla-field__control ucla-has-right-icon">
<input
class="ucla-field__input"
id="exampleIconRight"
type="text"
placeholder="Text input"
/>
<span class="ucla-field__icon-right">
<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 16L0 0L20 0L20 16L0 16ZM10 9L18 4V2L10 7L2 2L2 4L10 9Z"
fill="#333333"
/>
</svg>
</span>
</div>
</div>Best practices
Use placeholders or contextual tips in form fields to help people provide the right data.