ControlField

ControlField combines a label, description, and a control (Switch, Checkbox, or Radio) into a single pressable row. Tapping anywhere on the row toggles the control, giving settings lists and consent rows a consistent, accessible layout. Use the variant/label/description shorthand for the common case, or compose ControlField.Label, ControlField.Description, ControlField.Indicator, and ControlField.Error for full control.

Wrap multiple rows in ControlField.Group for an iOS-style settings surface — a rounded, filled (or bordered) background with hairline dividers between rows, plus optional section title/footer. The group can also set a shared size for all its children.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/ui

Examples

⁽⁴⁾

Properties

⁽³⁹⁾

Playground

Basics

A controlled switch row — the whole row is a single tap target.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
ControlField
 
}
 
from
 
'@platform-blocks/ui'
;
 
export
 
default
 
function
 
Demo
(
)
 
{
  
const
 
[
enabled
,
 setEnabled
]
 
=
 
useState
(
true
)
;
 
  
return
 
(
    
<ControlField
      
label
=
"Push notifications"
      
description
=
"Get notified when something happens"
      
isSelected
=
{
enabled
}
      
onSelectedChange
=
{
setEnabled
}
    
/>
  
)
;
}

Checkbox with validation

A consent row using the checkbox variant. When left unchecked the field shows an error message below the row.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
ControlField
 
}
 
from
 
'@platform-blocks/ui'
;
 
export
 
default
 
function
 
Demo
(
)
 
{
  
const
 
[
agreed
,
 setAgreed
]
 
=
 
useState
(
false
)
;
 
  
return
 
(
    
<ControlField
      
variant
=
"checkbox"
      
indicatorPosition
=
"left"
      
label
=
"I agree to the Terms of Service"
      
description
=
"You must accept before continuing"
      isRequired
      
isSelected
=
{
agreed
}
      
onSelectedChange
=
{
setAgreed
}
      
isInvalid
=
{
!
agreed
}
      
error
=
{
!
agreed 
?
 
'This field is required'
 
:
 
undefined
}
    
/>
  
)
;
}

Custom control

Compose the row explicitly with ControlField.Indicator to drop in a custom control — here a warning-colored checkbox.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Checkbox
,
 
ControlField
 
}
 
from
 
'@platform-blocks/ui'
;
 
export
 
default
 
function
 
Demo
(
)
 
{
  
const
 
[
subscribed
,
 setSubscribed
]
 
=
 
useState
(
false
)
;
 
  
return
 
(
    
<ControlField
 
isSelected
=
{
subscribed
}
 
onSelectedChange
=
{
setSubscribed
}
>
      
<Block
 
style
=
{
{
 flex
:
 
1
 
}
}
 
fullWidth
=
{
false
}
>
        
<ControlField.Label
>
Subscribe
 to newsletter
</ControlField.Label
>
        
<ControlField.Description
>
          
One
 email a week
,
 unsubscribe anytime
        
</ControlField.Description
>
      
</Block
>
      
<ControlField.Indicator
>
        
<Checkbox
 
colorVariant
=
"warning"
 
/>
      
</ControlField.Indicator
>
    
</ControlField
>
  
)
;
}

Grouped surface

Wrap rows in ControlField.Group to get an iOS-style settings surface — a rounded, filled background with hairline dividers between rows. The group can carry an optional title and footer, and sets a shared size for its children.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
ControlField
 
}
 
from
 
'@platform-blocks/ui'
;
 
export
 
default
 
function
 
Demo
(
)
 
{
  
const
 
[
wifi
,
 setWifi
]
 
=
 
useState
(
true
)
;
  
const
 
[
bluetooth
,
 setBluetooth
]
 
=
 
useState
(
false
)
;
  
const
 
[
airplane
,
 setAirplane
]
 
=
 
useState
(
false
)
;
 
  
return
 
(
    
<ControlField.Group
      
variant
=
"bordered"
      
title
=
"Connectivity"
      
footer
=
"Airplane mode disables all wireless radios."
    
>
      
<ControlField
 
label
=
"Wi-Fi"
 
isSelected
=
{
wifi
}
 
onSelectedChange
=
{
setWifi
}
 
/>
      
<ControlField
        
label
=
"Bluetooth"
        
isSelected
=
{
bluetooth
}
        
onSelectedChange
=
{
setBluetooth
}
      
/>
      
<ControlField
        
label
=
"Airplane mode"
        
description
=
"Turn off all connections"
        
isSelected
=
{
airplane
}
        
onSelectedChange
=
{
setAirplane
}
      
/>
    
</ControlField.Group
>
  
)
;
}

Platform Blocks

A comprehensive React Native design system with components that work seamlessly across iOS, Android, and Web.

Quick Links

Components Charts Hooks

Documentation

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap