Text Field

Overview

Text fields allow users enter and edit text. This component can be used for both short and long form entries.

The text field component is the workhorse of the input fields. It's used for all common text entry and can be safely used to take both single word responses as well as long-form text entry. Switching between single line or multi-line entries can be done with the multiline prop.

When to use

• Textfield should be used when data entry of alpha-numeric input is required in both short and long forms.

When not to use

• Do not use Text Field when requiring pure numeric values, please use the Number field component instead.
• Do not use the Text Field to allow data entry of dates or times. Instead use DateTime, Date or Time where appropriate.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Text Field

Label (optional)

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Error

string

Errors to display for the input.

 

Error Hidden

boolean

false

Only display the red border but not the error text.

Toggle Prop

Help Text

string

Array<string>

The help text to display for the input.

Value 

Label

string

Required

The label to be shown above the input.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

Multiline

boolean

false

Multiline.

Toggle Prop

Placeholder

string

The placeholder for the unselected value.

 

Required

boolean

false

If the field is required

Toggle Prop

Type

string

text

The type of input field e.g. text, password

 

Char Limit

number

Character limit.

 

Rows

number

1

Used along with multiline to set textarea rows attribute.

 

Multi-line text entry

Where required multiple lines of text can be entered by enabling the multiline prop. Note that by default the multiline feature auto-sizes the field to the data entry.

What is your life story (optional)

Tell me everything

 

What is your life story (optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a textarea with rows set to 3

Error

What is your life story (optional)

Missing information

 

What is your life story 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

What is your life story is required

Figma Library

You can find the component in our MedKit Figma library.