Text Field

5.1.7

Text fields let users enter and edit text.

Demo

NamnTypBeskrivning

autoComplete *

"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | stringTODO: Use explicit types via HTMLInputElement["autocomplete"] after upgrading to Typescript 5.1

autoFocus

booleanIf true, the input element will be focused during the first mount. Use with caution as it can cause accessibility issues.

children

React.ReactNode

className

stringOptional CSS class name.

color

"primary" | "secondary"The color of the component. It supports those theme colors that make sense for this component.

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

defaultValue

anyThe default value of the input element.

disabled

booleanIf true, the component is disabled.

endIcon

JSX.ElementPlace an icon to end the text field with

error

booleanIndicates if the component is in an error state, applying error-specific styling for validation feedback.

errorHelperText

stringHelper text message that will be displayed on error.

FormHelperTextProps

MuiFormHelperPropsProps applied to the FormHelperText element.

fullWidth

booleanIf true, the input will take up the full width of its container.

helperText

stringThe helper text content.

id *

stringThe id of the input element. Use this prop to make label and helperText accessible for screen readers. This is mandatory for WCAG 2.1 compliance.

InputLabelProps

PartialProps applied to the InputLabel element.

inputProps

Attributes applied to the input element.

InputProps

Partial | Partial | PartialProps applied to the Input element. Depending on the variant prop value, it will be a FilledInput, OutlinedInput, or Input component.

inputRef

React.Refref attribute that will be set on the input element

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

isSearchField

booleanSet this to true if the component is used as search field.

label

ReactNode | stringThe label content.

lang

"sv" | "en"Language used for internal translations.

margin

"none" | "dense" | "normal"If dense or normal, will adjust vertical spacing of this and contained components.

maxRows

number | stringMaximum number of rows to display when multiline option is set to true.

minRows

number | stringMinimum number of rows to display when multiline option is set to true.

multiline

booleanIf true, a textarea element will be rendered instead of an input.

numeric

booleanIf the input is used for numeric data. Displays numeric keyboard on mobile devices.

onClick

(event: React.MouseEvent) => voidClick listener for the text field wrapper. IMPORTANT! Only use in special circumstances, e.g. in TravellerField component

onKeyDown

(event: React.KeyboardEvent) => void

onKeyUp

(event: React.KeyboardEvent) => void

onMouseLeave

() => void

onMouseOver

() => void

placeholder

stringThe short hint displayed in the input before the user enters a value.

required

booleanIf true, the label is displayed as required and the input element` will be required.

rounded

booleanMakes the input rounded

rows

number | stringNumber of rows to display when multiline option is set to true.

select

booleanRender a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.

SelectProps

PartialProps applied to the Select element.

size

"medium" | "small"The size of the text field.

skeletonSx

SxPropsCustom styles for Skeleton.

startIcon

JSX.ElementPlace an icon to start the text field with

sx

SxPropsThe system prop that allows defining system overrides as well as additional CSS styles.

translation

{ optional: string }Provide local translations to be used in TextField

type

stringType of the input element. It should be a valid HTML5 input type.

valid

booleanIf true, a green checkmark icon will be displayed inside the text field.

value

anyThe value of the input element, required for a controlled component.

variant

"standard" | "outlined" | "filled"The variant to use.

autoComplete *

"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | stringTODO: Use explicit types via HTMLInputElement["autocomplete"] after upgrading to Typescript 5.1

autoFocus

booleanIf true, the input element will be focused during the first mount. Use with caution as it can cause accessibility issues.

children

React.ReactNode

className

stringOptional CSS class name.

color

"primary" | "secondary"The color of the component. It supports those theme colors that make sense for this component.

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

defaultValue

anyThe default value of the input element.

disabled

booleanIf true, the component is disabled.

endIcon

JSX.ElementPlace an icon to end the text field with

error

booleanIndicates if the component is in an error state, applying error-specific styling for validation feedback.

errorHelperText

stringHelper text message that will be displayed on error.

FormHelperTextProps

MuiFormHelperPropsProps applied to the FormHelperText element.

fullWidth

booleanIf true, the input will take up the full width of its container.

helperText

stringThe helper text content.

id *

stringThe id of the input element. Use this prop to make label and helperText accessible for screen readers. This is mandatory for WCAG 2.1 compliance.

InputLabelProps

PartialProps applied to the InputLabel element.

inputProps

Attributes applied to the input element.

InputProps

Partial | Partial | PartialProps applied to the Input element. Depending on the variant prop value, it will be a FilledInput, OutlinedInput, or Input component.

inputRef

React.Refref attribute that will be set on the input element

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

isSearchField

booleanSet this to true if the component is used as search field.

label

ReactNode | stringThe label content.

lang

"sv" | "en"Language used for internal translations.

margin

"none" | "dense" | "normal"If dense or normal, will adjust vertical spacing of this and contained components.

maxRows

number | stringMaximum number of rows to display when multiline option is set to true.

minRows

number | stringMinimum number of rows to display when multiline option is set to true.

multiline

booleanIf true, a textarea element will be rendered instead of an input.

numeric

booleanIf the input is used for numeric data. Displays numeric keyboard on mobile devices.

onClick

(event: React.MouseEvent) => voidClick listener for the text field wrapper. IMPORTANT! Only use in special circumstances, e.g. in TravellerField component

onKeyDown

(event: React.KeyboardEvent) => void

onKeyUp

(event: React.KeyboardEvent) => void

onMouseLeave

() => void

onMouseOver

() => void

placeholder

stringThe short hint displayed in the input before the user enters a value.

required

booleanIf true, the label is displayed as required and the input element` will be required.

rounded

booleanMakes the input rounded

rows

number | stringNumber of rows to display when multiline option is set to true.

select

booleanRender a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.

SelectProps

PartialProps applied to the Select element.

size

"medium" | "small"The size of the text field.

skeletonSx

SxPropsCustom styles for Skeleton.

startIcon

JSX.ElementPlace an icon to start the text field with

sx

SxPropsThe system prop that allows defining system overrides as well as additional CSS styles.

translation

{ optional: string }Provide local translations to be used in TextField

type

stringType of the input element. It should be a valid HTML5 input type.

valid

booleanIf true, a green checkmark icon will be displayed inside the text field.

value

anyThe value of the input element, required for a controlled component.

variant

"standard" | "outlined" | "filled"The variant to use.

Installation

npm install @sj-ab/component-library.ui.text-field

Länkar

Tillgänglighet

Välj rätt sorts inmatningsfält

TextField kan visa flera olika typer av inmatningsfält som passar till olika sorters data. Se till att använda rätt sorts Text Field baserad på den data som användaren förväntas mata in.

Text Field med etikett "Förnamn".

Vanlig text.

Text Field för inmatning av e-postaddress

E-postadress med type="email"

Text Field med maskerad input för lösenord

Maskerad inmatning för lösenord med type="password"

TextField med flerradig textinmatning.

Flerradig text med multiline={true}

Text Field för sifferinmatning.

Sifferinmatning med numeric={true}

Valfria och obligatoriska fält

Utgångspunkten är att alla textfält i våra kanaler är obligatoriska. Vi ska inte fråga användaren om information om vi inte faktiskt behöver den. Vi markerar därför enbart det fåtal fält som är valfria med en extra text i etiketter, och lämpliga WAI-ARIA-attribut (aria-required="false")

Detta sker automatiskt i komponenten när utvecklare sätter propen required={false}.

Felhantering

Text Field som har felaktig data visas med röd ram, en felikon och ett meddelande i text som beskriver vad som hänt och vad användaren kan göra för att åtgärda felet. Texten ska vara konkret och tydlig och hjälpsam för användaren.

Text Field med felmeddelandet "Kontrollera att e-postadressen innehåller @ och .

Utvecklare lägger in felmeddelandet med propen errorHelperText . Komponenten sätter då automatiskt relevanta WAI-ARIA-attribut (aria-invalid och aria-describedby) för att förmedla felet till hjälpmedel.

Auto-fill

Text Field bör underlätta för användaren att återanvända sparad data, som adresser, personuppgifter och lösenord genom HTML-attributet autocomplete. Det hjälper användare med motoriska funktionsnedsättningar att fylla i formuläret mycket snabbare och med mindre ansträngning.

Välj det värde från de tillgängliga autocomplete-värdena som passar bäst (se länk nedan). Om inget passar, använd autocomplete="on".

Auto-fill är ett lagkrav!

Det är ett krav att använda autocomplete för att vi ska leva upp till kriteriet 1.3.5 Identify Input Purpose (AA) i WCAG

Change log

Statistik

  • Importer av Text Field

    337
  • Repos med Text Field

    90%
  • Senaste installerade version av Text Field

    5.1.4
  • Äldsta installerade version av Text Field

    2.0.9