Saphyte & E-Afghans Input | Public Design System Documentation

Skip to documentation

Design systemsSelect design system

Search this documentation

Back to portfolio

Input

Make expected content and correction understandable in the same field.

Created & adapted by Insan NurjamanChakra UI foundationCurated public preview

Component model

Variants and sizes combine with default/focus/disabled, invalid and filled flags, labels/helpers, and left/right content. InputElement also offers Forgot password beyond the four types listed in older guidance.

Try the component

Illustrative interaction

Example state

Project name

Illustrative field. This value is not saved.

Native example only. No live account action, production service, or source-code parity is implied.

Original specimens

Original default, focus, disabled, invalid, and filled Input examples — Original exported design. Open to inspect at full size. Source appearance is preserved; private editable files are not linked.

Usage

Choose deliberately

Keep labels separate from placeholder content.
Explain errors through text, not only color.
Use addons only when they clarify the task.

Keep the limits visible

Source properties and screenshots document design intent. Validate the supported combinations and interaction behavior in the implementation before treating them as a guarantee.

Read usage guidelines

Curated design documentation by Insan Nurjaman. Native examples are illustrative, not a production package or a standards certification.

Explore the story