Form

Form manages values, validation, and submission state for a group of inputs. Wrap each control in a Form.Field (which injects value and change handlers via context) and submit with Form.Submit.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽¹⁾

Properties

⁽⁸⁾

Playground

Basic Usage

Form manages values, validation, and submission state. Wrap each input in a Form.Field (which injects value/change handlers via context) and trigger submission with Form.Submit.

Loading demo…

import
 
{
 
Block
,
 
Form
,
 
Input
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Form
      
initialValues
=
{
{
 name
:
 
''
,
 email
:
 
''
 
}
}
      
onSubmit
=
{
(
values
)
 
=>
 console
.
log
(
'submit'
,
 values
)
}
    
>
      
<Block
 
style
=
{
{
 width
:
 
'100%'
,
 maxWidth
:
 
400
 
}
}
>
        
<Form.Field
 
name
=
"name"
>
          
<Input
 
label
=
"Full name"
 
placeholder
=
"Ada Lovelace"
 
/>
        
</Form.Field
>
        
<Form.Field
 
name
=
"email"
>
          
<Input
 
label
=
"Email"
 
placeholder
=
"ada@example.com"
 
/>
        
</Form.Field
>
        
<Form.Submit
>
Create
 account
</Form.Submit
>
      
</Block
>
    
</Form
>
  
)
;
}

</>

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