Design

Read-Only Field#

The sole purpose of Read-Only Field is to help you layout a nice-looking form. It mimics a text input but without the appearance of an editable area.

label
your content here

Properties

Label

Children

Children Class Name

Props
nametypedefaultdescription


Example of composing a form#


Enter Your Address:
Age
32 years old


In this example, the user can change the year of birth, but the age is calculated automatically.


The appearance of Read-Only Field can harmonise well with the <Input /> and button components.


Where to use Read-Only Field#


    

  • Last name and First name in the page where user came back from doing the iDIN. On that page some information are shown as part of the form, but are not for the user to change.
    • 

  • Street names in the Netherlands can be deduced by just the Postal Code and House Number (Example). When creating form for Dutch addresses, the Street Name field is often a Read-only field.
    • 



Where not to use Read-Only Field#


    

  • If you want to temporarily disable a field, do not swap the original text input with this one. Do this instead: just disable the <Input /> component.
    •