React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreInput

A flexible text input component with validation support and customizable styling

Interactive Playground

Customize the input properties and see the changes in real-time

Label Text

Input Types

Different input types for various use cases

Text Input

Email Input

Password Input

Number Input

States

Different input states

Normal State

Error State

This field is required

Disabled State

With Icon

Icon appears on the right side of the input

With Messages

Input with validation messages

With Error Message

This field is required

With Warning Message

Please check your input

API Reference

StoreInput Props

value

string - The input value (controlled)

onChange

(value: string) => void - Change handler (required)

type

'text' | 'email' | 'password' | 'number' - Input type (default: 'text')

error

boolean - Shows error styling (default: false)

disabled

boolean - Disables the input (default: false)

placeholder

string - Placeholder text

autocomplete

string - HTML autocomplete attribute

children

React.ReactNode - Optional icon or content to display inside input

StoreInputMessage Props

errorMessage

string - Error message to display (takes priority over warning)

warningMessage

string - Warning message to display

StoreLabel Props

htmlFor

string - ID of the associated input element

chevron

boolean - Shows chevron icon (default: false)

children

React.ReactNode - Label text content