Nordstar

Input

A form control for collecting short text from the user. Renders as a real <input> by default — pass as="textarea" for multi-line entry.

When to use

  • Any single-line text field: name, email, search, password.
  • Multi-line free-form text — set as="textarea".

When not to use

  • For options from a fixed list — use a select or radio group instead.
  • For binary choices — use a checkbox or switch.

Installation

pnpm add @nordcom/nordstar-input
import { Input } from '@nordcom/nordstar';

Basic usage

A standard text input with a default value.

import { Input } from '@nordcom/nordstar';

export default function Example() {
    return <Input color="default" defaultValue="hello world!" type="text" variant="outline" />;
}

Variants

outline (default) for forms inside light surfaces; solid for input that should sit prominently against a darker background.

variant="solid"
import { Input } from '@nordcom/nordstar';

export default function Example() {
    return <Input defaultValue="hello world!" type="text" variant="solid" />;
}
color="primary"
import { Input } from '@nordcom/nordstar';

export default function Example() {
    return <Input color="primary" defaultValue="hello world!" type="text" />;
}
variant="solid" color="primary"
import { Input } from '@nordcom/nordstar';

export default function Example() {
    return <Input color="primary" defaultValue="hello world!" type="text" variant="solid" />;
}

With a placeholder

Placeholder text disappears as the user types. Use it for an example or format hint, not as a substitute for a label.

import { Input } from '@nordcom/nordstar';

export default function Example() {
    return <Input placeholder="Search for songs, albums and artists..." type="text" />;
}

With a label

The built-in label prop creates an accessible association without an external Label element. Combine with a placeholder for the most common form pattern:

import { Input } from '@nordcom/nordstar';

export default function Example() {
    return <Input label="Company Name" type="text" />;
}
import { Input } from '@nordcom/nordstar';

export default function Example() {
    return <Input label="Company Name" placeholder="Acme Inc." type="text" />;
}

Textarea

Pass as="textarea" for multi-line entry. The component still accepts label, placeholder, and defaultValue — but type is no longer relevant.

import { Input } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Input as="textarea" defaultValue={'Hello World!\nSecond line.'} label="Company Name" placeholder="Acme Inc." />
    );
}

Props

PropTypeDefaultDescription
as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | ComponentType<any> | undefined——
colorNordstarColor | undefined——
defaultValuestring | undefined——
labelstring | undefined——
type"button" | "search" | "time" | "image" | "text" | "hidden" | "color" | (string & {}) | "checkbox" | "radio" | "tel" | "url" | "email" | "date" | "datetime-local" | "file" | "month" | "password" | "range" | "reset" | "submit" | "week" | undefined——
valuestring | undefined——
variant"outline" | "solid" | null | undefined——

Accessibility

  • Use the right type (email, tel, number) so mobile keyboards adapt.
  • Mark required fields with the standard required attribute, not just visual hints.
  • For error states, surface a clear message after the input — color alone is not enough for users with low vision.

Related