CSC Design System Skills & Best Practices
Ctrl K
CS
On this page

Proposed CSC Standards · 0.1.0

Text inputs

Single-line fields with a visible label, hint, and error text.

Collect a short text value such as a name, email, or reference number.

Live componentResponsive playground

What this describes

Default
Outlined
Filled
Underline
Error

When to use

  • The value is a short string the person types or pastes.
  • The field needs a label, hint, or error tied to that control.

When not to use

  • The value is one of a known list. Use SelectField.
  • The value is a date. Use DateField.
  • The value is a file. Use Uploader.

Allowed variants

Outlined

Default form fields on white.

Hierarchy
Standard border.
Use in
Application forms.
Restriction
Do not remove the border without another 3:1 boundary.
Accessibility
Label sits above the field.
Responsive
The field stretches to the column. Min height stays at least 40px at md.

Filled

Fields on a gray or tinted surface.

Hierarchy
Fill instead of a strong border.
Use in
Search bars and tinted cards.
Restriction
Do not place filled fields on a matching gray where the box disappears.
Accessibility
Same label and error wiring as outlined.
Responsive
Full width of the parent column.

Underline

A compact row where a full box is too heavy.

Hierarchy
Lowest chrome.
Use in
Dense filters.
Restriction
Do not use underline for the primary application form.
Accessibility
The underline must remain visible at 3:1 against the surface.
Responsive
Avoid underline if the row wraps under the label in a confusing order.

Error

The field failed validation.

Hierarchy
Outlined field plus error text.
Use in
After blur or submit.
Restriction
Do not show an error before the person has interacted, unless they submitted.
Accessibility
Error text is in a role="alert" and aria-describedby.
Responsive
Error text wraps under the field. It is not a toast-only message.

Mandatory rules

INP-001RequiredWCAG

Associate a visible label

Every input has a visible label connected with htmlFor and id.

Implementation detail

WCAG 3.3.2 Labels or Instructions requires a label or instruction for user input.

Render a label element and point htmlFor at the input id.

Check: Clicking the label focuses the input.

Source

INP-002RequiredWCAG

Identify errors in text

An invalid field sets aria-invalid and shows the error in text, not by a red border alone.

Implementation detail

WCAG 3.3.1 Error Identification requires the error to be described in text.

Set aria-invalid on the input and put the message in text with role="alert".

Check: The error string is in the accessibility description of the field.

Source

INP-003RequiredHTML

Mark required fields in text

A required field exposes required and includes the word required for assistive technology.

Implementation detail

The required attribute blocks native submit. A star alone is not announced unless extra text exists.

Set the required attribute and include the word required in the accessible name.

Check: Submitting an empty required field is blocked, and the name includes required.

Source

INP-004RequiredWCAG

Set autocomplete for identity fields

Name, email, and similar fields set autocomplete to the matching token.

Implementation detail

WCAG 1.3.5 Identify Input Purpose applies to fields that collect information about the user.

Set autocomplete="email" or the relevant token on the input.

Applies when: The field collects information about the person using the form.

Check: The input element has the expected autocomplete attribute.

Source

INP-005ProhibitedProposed CSC convention

Do not use placeholder as the label

Placeholder text disappears while typing and is not a substitute for the label.

Implementation detail

Proposed CSC Standard. Placeholder contrast is often too low, and the hint vanishes on input.

Keep the visible label. Use placeholder only for an example format, and keep a hint if the format matters.

Check: The label remains visible while the field has a value.

INP-006RecommendedProposed CSC convention

Choose the appearance that matches the surface

Outlined, filled, and underline are the supported appearances. Error is outlined plus the error prop.

Implementation detail

Proposed CSC Standard. Mixing appearances in one form makes the error state harder to see.

Use a bordered white field on forms, a tinted fill on gray panels, and an underline only in a dense row.

Check: One form uses one appearance, except the error treatment.

Restrictions

  • INP-005 Do not use placeholder as the label. Placeholder text disappears while typing and is not a substitute for the label.

Accessibility

  • Label is always visible.
  • Errors use text and aria-invalid.
  • autocomplete is set for personal data.
  • Placeholder is not the name of the field.

Responsive behavior

  • Stack fields in one column under 760px.
  • Do not set a fixed width that overflows at 320px.
  • Hints and errors wrap instead of truncating.

Component states

Default

Empty or filled, label visible, no error.

Focus

The input shows the shared focus-visible outline.

Error

aria-invalid is true and the message is in the description.

Success

Optional success text. Do not use color alone to mean valid.

Disabled

Pass disabled. Explain in nearby text if the person must act elsewhere.

Correct implementation

Labeled email fieldCorrect implementation · TSX

The label, autocomplete, and required attribute are on the input. The field is outlined with an 8px radius.

Imports: None. Dependencies: None. Rules: INP-001, INP-003, INP-004.

export function EmailField() {
  return (
    <label>
      Email address
      <input type="email" autoComplete="email" required style={{ border: '1px solid #DCE3ED', borderRadius: 8, minHeight: 40, padding: '11px 12px', width: '100%' }} />
    </label>
  );
}
Error textAccessibility implementation · TSX

aria-invalid is true and the message is in a role="alert".

Imports: None. Dependencies: None. Rules: INP-002.

export function EmailError() {
  const message = 'Enter an email address like name@agency.gov.ph';
  return (
    <label>
      Email address
      <input type="email" aria-invalid="true" aria-describedby="email-error" style={{ border: '1px solid #C41222', borderRadius: 8, minHeight: 40, width: '100%' }} />
      <span id="email-error" role="alert">{message}</span>
    </label>
  );
}

Incorrect implementation

Placeholder as the only nameIncorrect implementation · TSX · Illustrative

When the person types, the purpose disappears. This is not the CSC Input API.

Imports: None. Dependencies: None. Rules: INP-005.

export function BareEmail() {
  return <input placeholder="Email address" />;
}

Common mistakes

  • Placeholder-only fields.
  • Error indicated only by a red border.
  • Required shown only with an asterisk and no accessible text.

Testing checklist

Agent prompts for this component are in the AI Development Hub.