Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A TextArea is an input where a user can enter multiline text. It has several props for customizing the input's interactivity and content.

PropTypeNotes
valuestring
requiredbooleanWhether he input must have a value in order to be valid.
disabledboolean
validationfunction
onValueChangefunction
placeholderstringText to display when the input is empty.
messageboolean or functionA message to display below the input. See Message below.
passwordbooleanWhether the input should bask its content with bullets.
delaynumberNumber of seconds to wait after the user stops typing before firing onValueChange.
autocapitalizestringOne of 'none, 'sentences', 'words' or 'characters.
autocompleteboolean
autofocusboolean
colsnumber
formstring
maxLengthnumber
minLengthnumber
spellcheckboolean
wrapstringOne of 'hard', 'soft', 'off'.
readOnlybooleanWhether a user may change the input's value.
tabIndexnumberThe input's place in the screen's sequential keyboard navigation.
onBlurfunctionCalled when the user navigates away from the input.
onFocusfunctionCalled when the user navigates to the input.
onInputStartfunctionCalled when the user begins entering text.

See the Inputs section for more on how inputs work in Learn.

Message

An input's message may be either a string or a callback function that accepts the input's value and validation state and returns a string.

// Overrides

import { Override } from 'framer'

// Message as a string
export function StringMessageExample(): Override {
	return {
		placeholder: 'Enter your full name',
		validation: (value) => value.includes(' '),
		message: 'Be sure to enter both your first and last name.',
	}
}

// Message as a string
export function CallbackMessageExample(): Override {
	return {
		placeholder: 'Enter your full name',
		validation: (value) => value.includes(' '),
		message: (value, valid) => {
			if (value.length === 0) {
				return 'Your name should include both a first and last name.'
			}
			if (!valid) {
				return 'Be sure to enter both your first and last name.'
			}
		},
	}
}

Delay

Before running the onChangeValue event, the component will wait until a certain amount of time has passed since the user's last change. This prevents the event from firing while the user is still typing. By default, the length of this time is .25 seconds, but you may adjust the length of this delay through the delay prop.

// Overrides

import { Override } from 'framer'

export function InputWithDelay(): Override {
	return {
		delay: 1,
		onValueChange: (value) => console.log(value),
	}
}

export function NoDelayInput(): Override {
	return {
		delay: 0,
		onValueChange: (value) => console.log(value),
	}
}