TextField

Inmatningsfält, textfält, nummerfält, lösenordsfält

Storybook

React Aria

Inmatningsfält när användaren ska fylla i kortare information, tex namn, personnummer eller e-postadress. För längre inmatning används TextArea.

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

<TextField
  label='Etikett'
  description='Beskrivning'
/>

EtikettBeskrivning

Beskrivning

TextField är en komposition av <Input>, <Label>, <FieldError> samt <Text> som alla är React Aria komponenter. Beskrivning av hur de hänger ihop finns på React Arias dokumentation för TextField. Elementen renderas som vanliga html <label> och <input> med fördelen att tillgänglighet avseende korrekt <label> är inbyggt samt att validering fungerar både med native HTML eller med realtime/serverside validering. MIDAS TextField erbjuder därmed via React Arias komponenter:

• Standard HTML-element renderade enligt MIDAS utseende
• Tillgänglighet via semantiskt sammankopplade labels och description
• Inbyggd formulärsvalidering för native HTML samt validering via andra bibliotek

Användning i formulär

React Aria stöder native HTML-formulär via name prop och eftersom TextField komponenten i grunden rymmer en standard <input> fungerar det som vanligt. Komponenten går också bra att använda i andra bibliotek för formulär. Se React Arias dokumentation för formulär för detaljer om hur den kan integreras i till exempel React Hook Form eller server-side validation.

Uncontrolled value

Använd defaultValue för att sätta ett uncontrolled value på ett TextField.

<TextField
  label='Skriv din favoritfrukt'
  defaultValue='Banan'
/>

Skriv din favoritfrukt

Controlled value

Använd value och onChange för att använda controlled value på TextField/Input. Använd prop isInvalid för att kontrollera fältets validering via state.

ControlledValue.tsx

const ControlledValue = () => {
  const [text, setText] = React.useState('')
  return (
    <>
      <TextField value={text} onChange={setText} label="Controlled value" />
      <Text>Text value: {text}</Text>
    </>
)

Controlled value

Text value:

Inbyggd validering

TextField kan valideras precis som en standard <input> via HTML constraint validation genom att sätta exempelvis type="email", isRequired, minLength etc, eller ett eget pattern för godtycklig regular expression. Felmeddelanden renderas automatiskt på valt språk i browsern. Se API för möjliga varianter.

Egen validering

Komponenten kan valideras med en egen funktion validate().

<TextField
  label='Skriv in frukt'
  isRequired
  validate={value => (value === 'frukt' ? true : 'Du måste skriva "frukt"')}
/>

Läs mer om validering i React Arias dokumentation.

Varianter

Storlek

För att minska höjden på TextField, använd size="medium" som minskar padding i inputfältet.

<TextField label="Large" /> // default is size="large"
<TextField label="Medium" size="medium" />

Large

Medium

Varianterna är tillägg till React Arias ursprungliga implementation.

Character counter

Använd showCounter för att visa antalet tecken som skrivits in i fältet.

<TextField
  label='Skriv in frukt'
  maxLength={10}
  showCounter
/>

Skriv in fruktMax 10 tecken0 / 10

Lösenord

Använd type="password" för att aktivera en knapp för att visa/dölja inmatat värde.

<TextField
  label='Lösenord'
  type='password'
/>

Lösenord

API

TextField

Name	Type	Default	Description
children	ReactNode	-	The children of the component. A function may be provided to alter the children based on component state.
label	string	-	Specify label displayed above the TextField
description	string	-	Specify description displayed below the label
errorMessage	string | ((validation: ValidationResult) => string)	-	Custom error messages
errorPosition	"top" | "bottom"	-
showCounter	boolean	false	Whether to show the character counter or not
size	Size	'large'	Component size (large: height 48px, medium: height 40px)
popover	InfoPopoverProps	-
isDisabled	boolean	-	Whether the input is disabled.
style	StyleOrFunction<DisclosureRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
slot	string	-	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.
autoFocus	boolean	-	Whether the element should receive focus on render.
enterKeyHint	"search" | "enter" | "done" | "go" | "next" | "previous" | "send"	-	An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
value	DateValue	-	The current value (controlled).
defaultValue	DateValue	-	The default value (uncontrolled).
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isRequired	boolean	-	Whether user input is required on the input before form submission.
isInvalid	boolean	-	Whether the value is invalid.
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.
validate	(value: boolean) => true | ValidationError	-	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.
className	ClassNameOrFunction<DisclosureRenderProps>	-	The CSS className for the element. A function may be provided to compute the class based on component state.
placeholder	string	-	Temporary text that occupies the text input when it is empty. See MDN.
skipContext	boolean	false	If the component should use local props and ref instead of a parent context