TextArea

Textfält, fritext

Storybook

React Aria

Inmatningsfält som används när användaren behöver fylla i längre information t.ex. en beskrivning, kommentar eller fritext. För kortare, striktare inmatning används TextField.

import { TextArea } from '@midas-ds/components'

<TextArea
  label='Kommentar'
  description='Skriv en kommentar'
/>

KommentarSkriv en kommentar

Beskrivning

TextArea är en komposition av <TextField>, <TextArea>, <Label>, <FieldError> och <Text> som alla är React Aria-komponenter.

Med undantag för type-attributet erbjuder TextArea samma API som TextField, vänligen använd dokumentationen för TextField för mer information.

API

Name	Type	Default	Description
children	ReactNode	-	The children of the component. A function may be provided to alter the children based on component state.
isDisabled	boolean	-	Whether the input is disabled.
size	Size	'large'	Component size (large: height 48px, medium: height 40px)
slot	string | null	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
style	StyleOrFunction<TextFieldRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", TextFieldRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
autoFocus	boolean	-	Whether the element should receive focus on render.
value	string	-	The current value (controlled).
errorMessage	((validation: ValidationResult) => string) | string	-	Custom error messages
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isInvalid	boolean	-	Whether the value is invalid.
defaultValue	string	-	The default value (uncontrolled).
label	string	-	Specify label displayed above the TextField
description	string	-	Specify description displayed below the label
validationBehavior	"aria" | "native"	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
isRequired	boolean	-	Whether user input is required on the input before form submission.
validate	((value: string) => true | ValidationError | null)	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
enterKeyHint	"done" | "enter" | "go" | "next" | "previous" | "search" | "send"	-	An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
popover	InfoPopoverProps	-
errorPosition	"bottom" | "top"	-
showCounter	boolean	false	Whether to show the character counter or not
className	ClassNameOrFunction<InputRenderProps>	'react-aria-TextArea'	The CSS className for the element. A function may be provided to compute the class based on component state.