TextArea

GitHub

Om komponenten

TextArea, eller fritekstfelt, er et skjemaelement som gir brukeren mulighet til å skrive tekst over flere linjer.

Egnet til:

Når bruker skal kunne skrive lengre tekster, som å gi en beskrivelse.

Uegnet til:

Korte tekster, slik som navn eller medlemsnummer. Bruk da heller TextField.

Varianter

Uncontrolled

Uncontrolled TextArea med label

<TextArea label="Beskrivelse" />

Uncontrolled TextArea med label og description

<TextArea
  label="Beskrivelse"
  description="Maks 250 tegn"
/>

Uncontrolled TextArea med label og placeholder

<TextArea
  placeholder="Gi en kort beskrivelse"
  label="Beskrivelse"
/>

Uncontrolled TextArea med usynlig label

<TextArea aria-label="Beskrivelse" />

Validering

Uncontrolled TextArea med feilmelding

<TextArea
  label="Beskrivelse"
    errorMessage="Her er det noe feil!"
/>

Uncontrolled, påkrevd TextArea

<form
  onSubmit={(e) => e.preventDefault()}
  className="grid gap-6"
>
  <TextArea
    label="Beskrivelse"
    isRequired
  />
  <Button type="submit" className="w-fit">
    Send inn
  </Button>
</form>

Uncontrolled TextArea med maks tre linjer

<TextArea
  label="Beskrivelse"
  rows={3}
/>

Controlled

Controlled TextArea

function(){
  const [text, setText] = React.useState("");

  return <TextArea
  label="Beløp"
  value={text}
  onChange={setText}
/>
}

Props

TextArea

Prop	Description	Default
`description?`	Help text for the form control.	-
`errorMessage?`	Error message for the form control. Automatically sets `isInvalid` to true	-
`label?`	Label for the form control.	-
`placeholder?`	Placeholder text. Only visible when the input value is empty.	-
`rows?`	The number of visible text lines for the control.	2
`form?`		-
`pattern?`		-
`defaultValue?`	The default value (uncontrolled).	-
`autoFocus?`		-
`enterKeyHint?`		-
`spellCheck?`		-
`autoCorrect?`		-
`inputMode?`		-
`type?`		'text'
`name?`		-
`value?`	The current value (controlled).	-
`excludeFromTabOrder?`		-
`render?`		-
`autoComplete?`		-
`maxLength?`		-
`minLength?`		-
`isRequired?`	Whether user input is required on the input before form submission.	-
`isInvalid?`		-
`validationBehavior?`	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.	'native'
`validate?`	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.	-
Events
`onCopy?`	Handler that is called when the user copies text. See MDN.	-
`onCut?`	Handler that is called when the user cuts text. See MDN.	-
`onPaste?`	Handler that is called when the user pastes text. See MDN.	-
`onCompositionEnd?`	Handler that is called when a text composition system completes or cancels the current text composition session. See MDN.	-
`onCompositionStart?`	Handler that is called when a text composition system starts a new text composition session. See MDN.	-
`onCompositionUpdate?`	Handler that is called when a new character is received in the current text composition session. See MDN.	-
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onChange?`	Handler that is called when the value changes.	-
`onBeforeInput?`	Handler that is called when the input value is about to be modified. See MDN.	-
`onInput?`	Handler that is called when the input value is modified. See MDN.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`onSelect?`	Handler that is called when text in the input is selected. See MDN.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
Styles
`className?`	Additional CSS className for the element.	-
`style?`	Additional style properties for the element.	-
Accessibility
`id?`		-
`aria-activedescendant?`		-
`aria-autocomplete?`		-
`aria-controls?`		-
`aria-describedby?`		-
`aria-details?`		-
`aria-errormessage?`		-
`aria-haspopup?`		-
`aria-label?`		-
`aria-labelledby?`		-