Textfield

cds-textfield

The Textfield component allows users to input and edit text. Designed for clarity and ease of use, it provides visual feedback for states like focus, error, or success. Additional features such as placeholders, character counters, and icons can enhance functionality, making text entry intuitive and efficient.

Default

Label

Default textfield

<div class="cds-textfield">
  <label class="cds-textfield__label">Label</label>
  <input class="cds-textfield__field" type="text" />
</div>

---

Elements

Element	Code	Parent	HTML tag	Required
Label	cds-textfield__label	Block: cds-textfield	<label>	optional
Field	cds-textfield__field	Block: cds-textfield	<input>	required
Icon	cds-textfield__icon	Block: cds-textfield	<span>	optional
Action	cds-textfield__action	Block: cds-textfield	<button>	optional
Validation	cds-textfield__validation	Block: cds-textfield	<span>	optional
Placeholder*	Placeholder attribute	Element: cds-textfield__field	placeholder	optional

There are 2 combinations: label + input or no label but with icon-placeholder + palceholder attr.

Label

Label

---

<div class="cds-textfield">
  <span class="cds-textfield__icon cds-ph-user"></span>
  <input class="cds-textfield__field" type="text" placeholder="placeholder" />
  <button class="cds-textfield__action cds-ph-wrench"></button>
</div>

---

States

Modifier	Options
States	is-disabled, is-invalid

Is disabled

Disabled textfield

Example

<div class="cds-textfield is-disabled">
  <label class="cds-textfield__label">Disabled textfield</label>
  <input class="cds-textfield__field" type="text" />
</div>

Is invalid

Invalid textfieldValidation message

Example

<div class="cds-textfield is-invalid">
  <label class="cds-textfield__label">Invalid textfield</label>
  <input class="cds-textfield__field" type="text" />
  <span class="cds-textfield__validation">Validation message</span>
</div>