About

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.

(optional)

Helper copy sits under the 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

Contact · Currency · Date · Tenure

Password · OTP · PIN · Search

Dropdown · Account

Toggle · Direct selection

Range

0%50%100%
HKD
HKD

Upload · OCR · Digital signature

Conditional input-fields

Stacked fields that appear together.

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