COMPONENTS / DATA ENTRY

Text inputs

Labeled fields with hint, error, success, and three visual treatments.

standardv1.0.0verifiedFigma linked

Standards Open in Figma

Live previewUpdated 2026-10-09 · CSC Design System

Full nameUse the name on your identification

Design variations

Outlined

Filled

Underline

Error

Implementation

// npx github:rbillyjames0221/csc-ui init
import '@csc/ui/styles.css';
import { Input } from '@csc/ui';

export function Example() {
  return (
    <Input appearance="outlined" size="md" state="default">Full name</Input>
  );
}

Agent prompt

Copy a prompt for this component from the AI Development Hub.

When to use it

Labeled fields with hint, error, success, and three visual treatments.

Dependencies: None beyond React. Source: packages/ui/src/input.tsx. 1.0.0 — Outlined, filled, and underline fields.