Input

A labelled text field built on React Aria - leading and trailing adornments, hint text, and required/invalid states with a cross-fading focus ring.

This is a hint about this input.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeInputExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeInputExample/></NativeScope>}

Sizes

This is a hint about this input.

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="input" id="sizes"/>}

States

This is a hint about this input.

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="input" id="states"/>}

Phone number

Phone Number

This is a hint about this input.

Phone Number

This is a hint about this input.

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="input" id="phone"/>}

Advanced playground, API and recovery states ↗

Input

A labelled text field built on React Aria - leading and trailing adornments, hint text, and required/invalid states with a cross-fading focus ring.

This is a hint about this input.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeInputExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeInputExample/></NativeScope>}

Sizes

This is a hint about this input.

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="input" id="sizes"/>}

States

This is a hint about this input.

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="input" id="states"/>}

Phone number

Phone Number

This is a hint about this input.

Phone Number

This is a hint about this input.

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="input" id="phone"/>}

Advanced playground, API and recovery states ↗

Input

Installation

Sizes

States

Phone number

Search Helios UI

Input

Installation

Sizes

States

Phone number

Search Helios UI