Input Field

A single-line text input. Three states — Default, Hover, Focus — with all colors, spacing and typography pulled directly from the LUSTER Figma component.

State

Figma Properties
State: Default
Border color: #F2EDFF
Text color: #62626D
Background: #FFFFFF
Padding: 8px 16px · Border: 2px

Variant

Default

Hover

Focus

Design Tokens

Token Name	Figma Variable	Default Value
--inputFieldDefaultBgColor	InputField/Default/Bg/Color	#FFFFFF
--inputFieldDefaultBorderColor	InputField/Default/Border/Color	#F2EDFF
--inputFieldDefaultTextColor	InputField/Default/Title/Font/Color	#62626D
--inputFieldHoverBgColor	InputField/Hover/Bg/Color	#FFFFFF
--inputFieldHoverBorderColor	InputField/Hover/Border/Color	#916DFF
--inputFieldHoverTextColor	InputField/Hover/Title/Font/Color	#62626D
--inputFieldFocusBgColor	InputField/Focus/Bg/Color	#FFFFFF
--inputFieldFocusBorderColor	InputField/Focus/Border/Color	#916DFF
--inputFieldFocusTextColor	InputField/Focus/Title/Font/Color	#794DFF
--inputFieldPaddingX	InputField/Padding/X	16px
--inputFieldPaddingY	InputField/Padding/Y	8px
--inputFieldBorderWidth	InputField/Border/Width	2px
--inputFieldBorderRadius	InputField/Border/Radius	0px
--inputFieldFontFamily	Body/Font/Family	Inter
--inputFieldFontSize	Typography/Body/Font/Size	16px
--inputFieldFontLineHeight	Typography/Body/Font/LineHeight	19px
--inputFieldFontWeight	Typography/Body/Font/Weight	400

Usage Guidelines

✓ DO

Always pair an input with a visible label describing what to enter.

✓ DO

Use the Focus border color to clearly signal the active field.

✕ DON'T

Don't use placeholder text as a replacement for a label.

✕ DON'T

Don't remove the focus indicator — it's essential for accessibility.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import React from 'react';
import './InputField.css';

export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
  ({ label, id, className = '', ...props }, ref) => (
    <div className="field-group">
      {label && <label htmlFor={id} className="field-label">{label}</label>}
      <input ref={ref} id={id} className={`field ${className}`} {...props} />
    </div>
  )
);

InputField.displayName = 'InputField';

/* Input Field tokens — generated from LUSTER Figma variables */
:root {
  /* Default */
  --inputFieldDefaultBgColor: #FFFFFF;
  --inputFieldDefaultBorderColor: #F2EDFF;
  --inputFieldDefaultTextColor: #62626D;
  /* Hover */
  --inputFieldHoverBgColor: #FFFFFF;
  --inputFieldHoverBorderColor: #916DFF;
  --inputFieldHoverTextColor: #62626D;
  /* Focus */
  --inputFieldFocusBgColor: #FFFFFF;
  --inputFieldFocusBorderColor: #916DFF;
  --inputFieldFocusTextColor: #794DFF;
  /* Geometry & type */
  --inputFieldPaddingX: 16px;
  --inputFieldPaddingY: 8px;
  --inputFieldBorderWidth: 2px;
  --inputFieldBorderRadius: 0px;
  --inputFieldFontFamily: 'Inter', sans-serif;
  --inputFieldFontSize: 16px;
  --inputFieldFontLineHeight: 19px;
  --inputFieldFontWeight: 400;
}

.field {
  width: 100%;
  padding: var(--inputFieldPaddingY) var(--inputFieldPaddingX);
  background: var(--inputFieldDefaultBgColor);
  border: var(--inputFieldBorderWidth) solid var(--inputFieldDefaultBorderColor);
  border-radius: var(--inputFieldBorderRadius);
  font-family: var(--inputFieldFontFamily);
  font-size: var(--inputFieldFontSize);
  line-height: var(--inputFieldFontLineHeight);
  font-weight: var(--inputFieldFontWeight);
  color: var(--inputFieldDefaultTextColor);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.field:hover {
  background: var(--inputFieldHoverBgColor);
  border-color: var(--inputFieldHoverBorderColor);
  color: var(--inputFieldHoverTextColor);
}
.field:focus {
  outline: none;
  background: var(--inputFieldFocusBgColor);
  border-color: var(--inputFieldFocusBorderColor);
  color: var(--inputFieldFocusTextColor);
}

<!-- Input field with label -->
<div class="field-group">
  <label for="email" class="field-label">Email</label>
  <input id="email" class="field" type="email" placeholder="Type here">
</div>

import { useState } from 'react';
import { InputField } from '@luster/ui';

export default function SignupForm() {
  const [email, setEmail] = useState('');
  return (
    <InputField
      id="email"
      label="Email"
      type="email"
      placeholder="Type here"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}