Input

stablev1.0.0

Input Field from Figma SCDC sheet 24:593. Field types and states from the spec boards: text, contact, currency, date, tenure, password, OTP, PIN, dropdown, toggle, direct, range, upload, OCR, signature, account, conditional.

Open in Figma

Live preview

Input Field · header

Figma sheet 24:593 wraps every Field Type with Title, (optional), Sub-text, info, plus, and inline feedback. Example screens on the F board are reference only.

Title(optional)

Helper copy sits under the title.

Title

Looks good

Text · states

Default grey bar. Focus is empty with a green bar. Active is focused with a value. Type anything except 123, then click away for Error. Current: Default

Error Feedback

Contact · Currency · Date · Tenure

Mobile number

Error Feedback

Amount

Error Feedback

Date

Error Feedback

Loan tenure

Error Feedback

Password · OTP · PIN · Search

Password

Error Feedback

Verification number

Error Feedback

Dropdown · Account

Dropdown · single

Error Feedback

Dropdown · single

Error Feedback

Dropdown · multi

Error Feedback

Account selection

Error Feedback

Toggle · Direct selection

Direct · single

Direct · long

Direct · multi

Range

Percentage range

0%50%100%

Currency range

HKD

Upload · OCR · Digital signature

Upload

Uploading

Uploading…statement.pdf

Success

Uploadedstatement.pdf

Error

Upload failedstatement.pdf

Upload failed

OCR

Scan document

OCR success

Scan completepassport.jpg

Preview

OCR error

Scan failed

Could not read the document

Digital signature · form

Tap to sign

Digital signature · filled

Signature capturedsignature.png

Digital signature · API

Tap to sign

Conditional input-fields

Conditional

Stacked fields that appear together.

Full name

Mobile number

Date of birth

Implementation

import { Input } from '@nitro-core/ui';

<Input
  label="Title"
  optional
/>

Design → Code

Property names stay aligned so a Figma Button maps onto the production import below.

Figma

Input Field

24:2594

Field Type: Text
Title: False
(optional): false
Sub-text: False
Inline Feedback: False

Code

Input

@nitro-core/ui

type: "text"
label: ""
optional: {false}
description: ""
error: ""

Token inspector

Underline

Figma Variable

core/grey/300 #aaaaaa

Nitro Token

color.border.input

CSS

--nitro-color-border-input

Chain

Figma → Token → CSS → Component

Focus

Figma Variable

brand/green #38d200

Nitro Token

color.border.inputFocus

CSS

--nitro-color-border-input-focus

Chain

Figma → Token → CSS → Component

Error

Figma Variable

core/red/500 #d0021b

Nitro Token

color.feedback.error

CSS

--nitro-color-feedback-error

Chain

Figma → Token → CSS → Component