CSS Components / Text & Textarea

Text & Textarea

Use .c-txt components to style form text fields. Child component classes are shown below.

.c-txt__hint .c-txt__message

Hint text may also appear below the input field.

.c-txt__hint

The unmodified .c-txt occupies 100% of the width of its container. The following fields are contained by a 370px wrapper.

Hint text for one...
Hint text for two...

Using a grid layout, field labels and inputs may be positioned side-by-side.

Modifiers

Use the .c-txt--inline class modifier to layout text controls inline.

strength

Apply a .c-txt__input--tag modifier class to inputs that are used to hold .c-tag elements.

.c-txt__input--tag

The .c-txt__input--media modifier removes default padding and acts as a flex container for it's contents. Both start and end media are available.

Add the .c-txt__input--area modifier class to style <textarea> elements. Specify the textarea's rows attribute to control the height.

By default, the .c-txt__input--area class prevents user-controlled resizing. Adding .is-resizable allows the user to vertically resize the textarea (horizontal resizing typically interferes with layout in an undesirable manner). Resize is not supported by IE.

States

Types

The fields shown below demonstrate how .c-txt__input works in combination with various input types. In general, we attempt to knock out non-standard browser features (spinners, clear buttons, etc). Styling from the .c-txt__input--select dropdown modifier is added to fields that support native calendar pickers.

Playground