Component

Form Fields

Every editable input flows through one component, wired to the --components-form-field-* tokens. Use FormField for Desktop / Tablet and MobileFormField for the Mobile Application — switch tabs to compare.

Storybook
Playground
Type
Size
State
Label
Required asterisk
Hint text
Hint content
Left icon
Right icon
Preview
*
Helper or hint text write here.
JSX
<FormField
  type="input"
  name="input-field"
  label="Label"
  hintText="Helper or hint text write here."
/>

Props

The full FormField API for Desktop / Tablet. The type prop selects the variant; every state maps to the --components-form-field-* tokens.

PropTypeDefaultDescription
type
'input' | 'phone' | 'date' | 'date-picker' | 'payment' | 'website' | 'otp' | 'textarea' | 'file-upload' | 'select''input'Selects the field variant — see the Playground type control for all ten.
size
'sm' | 'md''sm'Input container size. 'sm' = 36px height / 16px icons, 'md' = 44px / 20px. Fields default to 320px wide (min 320px, max 1600px); file upload to 512px.
state
'placeholder' | 'hover' | 'filled' | 'focus' | 'error' | 'disabled' | 'loading''placeholder'Interaction / validation state. Drives border, background, text and icon tokens.
nameRequired
string—Form field name attribute — required for serialisation, label association and validation.
label
string'Label'Field label rendered as a <label> tied to the input via htmlFor / id.
showLabel
booleantrueShow / hide the label title above the input.
showAsterisk
booleantrueShow the required asterisk beside the label.
showHintLabel
booleantrueShow / hide the helper or hint text below the input (requires hintText).
hintText
string'Helper or hint text write here.'Helper / hint content. Turns red in the error state.
showLeftIcon
booleantrueShow / hide the left icon (type="input" and type="select").
showRightIcon
booleantrueShow / hide the right icon (input, phone, date, date-picker, payment and website types).
changeLeftIcon
ReactNode<MailOutlineIcon />Swap the default left icon — accepts any icon from nexus/icons.
changeRightIcon
ReactNode<HelpOutlineIcon />Swap the default right icon — accepts any icon from nexus/icons.
placeholder
stringper-type defaultPlaceholder text. Defaults: 'Input field placeholder', '+91 99999 99999', 'MM / DD / YYYY', 'MM/DD/YYYY - MM/DD/YYYY', '0000 0000 0000 0000', 'www.websitename.com', 'Write your description here...'.
value
string—Controlled value / display value for the field.
changePaymentIcon
ReactNode<MastercardIcon />type="payment" — swap the card brand icon shown at the left (e.g. VisaCreditCardIcon).
otpValues
string[]['0' placeholders]type="otp" — exactly 6 single-character strings, one per digit box (36×36 at 'sm', 44×44 at 'md').
fileName
string'AI_Design_Project_MD.doc'type="file-upload" — item-upload row label.
fileSize
string'200 KB of 200 KB'type="file-upload" — file size label (Mobile uses the shorter '200 KB' form).
showCompleteItemUpload
booleantruetype="file-upload" — show the completed row (check icon, 'Complete', delete action).
showUploadingItemUpload
booleantruetype="file-upload" — show the in-progress row ('Uploading...', delete action).
showErrorItemUpload
booleantruetype="file-upload" — show the failed row ('Upload failed', retry action, error border).
selectLabel
string'Select/Dropdown Item'type="select" — the selected item label shown in the trigger.
menuLabel
string'Select/Dropdown Menu Item'type="select" — label text for each item in the open menu list.
className
string—Layout-only classes (margin, width).