Input

A versatile text input component that provides a consistent interface for text entry across different platforms. The Input component supports various types, validation states, and accessibility features.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁶⁾

Properties

⁽⁸⁰⁾

Playground

Basic

Basic text input with label, placeholder, and value handling.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Input
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 
useState
(
''
)
;
 
  
return
 
(
    
<Input
      
label
=
"Full name"
      
placeholder
=
"Enter your full name"
      
value
=
{
value
}
      
onChangeText
=
{
setValue
}
    
/>
  
)
;
}

Variants

Four visual variants for the input shell: default, filled, outline, and unstyled. The variant only changes the container fill and border — label, sections, and disclaimer stay consistent.

Loading demo…

import
 
{
 
Block
,
 
Input
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Input
 
variant
=
"default"
 
label
=
"Default"
 
placeholder
=
"user@example.com"
 
/>
      
<Input
 
variant
=
"filled"
 
label
=
"Filled"
 
placeholder
=
"user@example.com"
 
/>
      
<Input
 
variant
=
"outline"
 
label
=
"Outline"
 
placeholder
=
"user@example.com"
 
/>
      
<Input
 
variant
=
"unstyled"
 
placeholder
=
"Unstyled — type to edit inline"
 
/>
    
</Block
>
  
)
;
}

Types

Set type to switch the keyboard and browser behaviour — email, password, number, and tel are all supported.

Loading demo…

import
 
{
 
Block
,
 
Input
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Input
 
type
=
"email"
 
label
=
"Email address"
 
placeholder
=
"user@example.com"
 
/>
      
<Input
 
type
=
"password"
 
label
=
"Password"
 
placeholder
=
"Enter your password"
 
/>
      
<Input
 
type
=
"number"
 
label
=
"Age"
 
placeholder
=
"Enter your age"
 
/>
      
<Input
 
type
=
"tel"
 
label
=
"Phone number"
 
placeholder
=
"+1 (555) 123-4567"
 
/>
    
</Block
>
  
)
;
}

Validation

Pass error to show a validation message, required to mark the field, and helperText for guidance. disabled blocks editing.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Block
,
 
Input
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 isValidEmail 
=
 
(
email
:
 
string
)
 
=>
 
/^
[
^
\s@
]
+
@
[
^
\s@
]
+
\
.
[
^
\s@
]
+
$
/
.
test
(
email
)
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
email
,
 setEmail
]
 
=
 
useState
(
''
)
;
 
  
return
 
(
    
<Block
>
      
<Input
        
type
=
"email"
        
label
=
"Email address"
        
placeholder
=
"user@example.com"
        
value
=
{
email
}
        
onChangeText
=
{
setEmail
}
        required
        
error
=
{
email
.
length 
>
 
0
 
&&
 
!
isValidEmail
(
email
)
 
?
 
'Please enter a valid email address'
 
:
 
undefined
}
        
helperText
=
"We'll never share your email"
      
/>
 
      
<Input
 
label
=
"Disabled"
 
value
=
"Cannot edit this value"
 disabled 
/>
    
</Block
>
  
)
;
}

Multiline Modes

Pair multiline with minLines/maxLines to auto-expand, or with numberOfLines for a fixed height.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Block
,
 
Input
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
autoText
,
 setAutoText
]
 
=
 
useState
(
''
)
;
  
const
 
[
fixedText
,
 setFixedText
]
 
=
 
useState
(
''
)
;
 
  
return
 
(
    
<Block
>
      
<Input
        
label
=
"Auto-expanding"
        
placeholder
=
"Start typing — press Enter to add lines"
        
value
=
{
autoText
}
        
onChangeText
=
{
setAutoText
}
        multiline
        
minLines
=
{
1
}
        
maxLines
=
{
5
}
        
helperText
=
"Grows from 1 to 5 lines, then scrolls"
      
/>
 
      
<Input
        
label
=
"Fixed height"
        
placeholder
=
"Always 3 lines tall"
        
value
=
{
fixedText
}
        
onChangeText
=
{
setFixedText
}
        multiline
        
numberOfLines
=
{
3
}
      
/>
    
</Block
>
  
)
;
}

Sections and slot styling

Render content inside the field with startSection / endSection, and add clearable for a dismiss button. startSectionProps and endSectionProps accept any <View> props (including style) and apply them to the slot wrapper; placeholderTextColor overrides the muted default.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Block
,
 
Icon
,
 
Input
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
workspace
,
 setWorkspace
]
 
=
 
useState
(
''
)
;
  
const
 
[
search
,
 setSearch
]
 
=
 
useState
(
''
)
;
 
  
return
 
(
    
<Block
>
      
<Input
        
label
=
"URL"
        
placeholder
=
"my-workspace"
        
value
=
{
workspace
}
        
onChangeText
=
{
setWorkspace
}
        
startSection
=
{
<Text
 
ff
=
"monospace"
 
color
=
"muted"
>
https:
//</Text>}
        
startSectionProps
=
{
{
 style
:
 
{
 paddingRight
:
 
8
 
}
 
}
}
      
/>
 
      
<Input
        
label
=
"Search"
        
placeholder
=
"Find anything…"
        
value
=
{
search
}
        
onChangeText
=
{
setSearch
}
        clearable
        
placeholderTextColor
=
"#a855f7"
        
startSection
=
{
<Icon
 
name
=
"search"
 
size
=
{
16
}
 
/>
}
        
startSectionProps
=
{
{
 style
:
 
{
 paddingRight
:
 
8
 
}
 
}
}
      
/>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Input

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap