Text Field
Text fields let users enter and edit text.
Namn | Typ | Beskrivning |
---|---|---|
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" |
string | TODO: Use explicit types via HTMLInputElement["autocomplete"] after upgrading to Typescript 5.1 |
autoFocus | boolean | If true, the input element will be focused during the first mount. Use with caution as it can cause accessibility issues. |
children | React.ReactNode | |
className | string | Optional 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 | any | The default value of the input element. |
disabled | boolean | If true, the component is disabled. |
endIcon | JSX.Element | Place an icon to end the text field with |
error | boolean | Indicates if the component is in an error state, applying error-specific styling for validation feedback. |
errorHelperText | string | Helper text message that will be displayed on error. |
FormHelperTextProps | MuiFormHelperProps | Props applied to the FormHelperText element. |
fullWidth | boolean | If true, the input will take up the full width of its container. |
helperText | string | The helper text content. |
id * | string | The 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 | Partial | Props applied to the InputLabel element. |
inputProps |
| Attributes applied to the input element. |
InputProps | Partial |
Partial |
Partial | Props applied to the Input element. Depending on the variant prop value, it will be a FilledInput, OutlinedInput, or Input component. |
inputRef | React.Ref | ref attribute that will be set on the input element |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
isSearchField | boolean | Set this to true if the component is used as search field. |
label | ReactNode |
string | The 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 |
string | Maximum number of rows to display when multiline option is set to true. |
minRows | number |
string | Minimum number of rows to display when multiline option is set to true. |
multiline | boolean | If true, a textarea element will be rendered instead of an input. |
numeric | boolean | If the input is used for numeric data. Displays numeric keyboard on mobile devices. |
onClick | (event: React.MouseEvent) => void | Click 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 | string | The short hint displayed in the input before the user enters a value. |
required | boolean | If true, the label is displayed as required and the input element` will be required. |
rounded | boolean | Makes the input rounded |
rows | number |
string | Number of rows to display when multiline option is set to true. |
select | boolean | Render 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 | Partial | Props applied to the Select element. |
size | "medium" |
"small" | The size of the text field. |
skeletonSx | SxProps | Custom styles for Skeleton. |
startIcon | JSX.Element | Place an icon to start the text field with |
sx | SxProps | The 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 | string | Type of the input element. It should be a valid HTML5 input type. |
valid | boolean | If true, a green checkmark icon will be displayed inside the text field. |
value | any | The 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" |
string | TODO: Use explicit types via HTMLInputElement["autocomplete"] after upgrading to Typescript 5.1 |
autoFocus | boolean | If true, the input element will be focused during the first mount. Use with caution as it can cause accessibility issues. |
children | React.ReactNode | |
className | string | Optional 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 | any | The default value of the input element. |
disabled | boolean | If true, the component is disabled. |
endIcon | JSX.Element | Place an icon to end the text field with |
error | boolean | Indicates if the component is in an error state, applying error-specific styling for validation feedback. |
errorHelperText | string | Helper text message that will be displayed on error. |
FormHelperTextProps | MuiFormHelperProps | Props applied to the FormHelperText element. |
fullWidth | boolean | If true, the input will take up the full width of its container. |
helperText | string | The helper text content. |
id * | string | The 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 | Partial | Props applied to the InputLabel element. |
inputProps |
| Attributes applied to the input element. |
InputProps | Partial |
Partial |
Partial | Props applied to the Input element. Depending on the variant prop value, it will be a FilledInput, OutlinedInput, or Input component. |
inputRef | React.Ref | ref attribute that will be set on the input element |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
isSearchField | boolean | Set this to true if the component is used as search field. |
label | ReactNode |
string | The 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 |
string | Maximum number of rows to display when multiline option is set to true. |
minRows | number |
string | Minimum number of rows to display when multiline option is set to true. |
multiline | boolean | If true, a textarea element will be rendered instead of an input. |
numeric | boolean | If the input is used for numeric data. Displays numeric keyboard on mobile devices. |
onClick | (event: React.MouseEvent) => void | Click 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 | string | The short hint displayed in the input before the user enters a value. |
required | boolean | If true, the label is displayed as required and the input element` will be required. |
rounded | boolean | Makes the input rounded |
rows | number |
string | Number of rows to display when multiline option is set to true. |
select | boolean | Render 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 | Partial | Props applied to the Select element. |
size | "medium" |
"small" | The size of the text field. |
skeletonSx | SxProps | Custom styles for Skeleton. |
startIcon | JSX.Element | Place an icon to start the text field with |
sx | SxProps | The 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 | string | Type of the input element. It should be a valid HTML5 input type. |
valid | boolean | If true, a green checkmark icon will be displayed inside the text field. |
value | any | The value of the input element, required for a controlled component. |
variant | "standard" |
"outlined" |
"filled" | The variant to use. |
npm install @sj-ab/component-library.ui.text-field
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.
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.
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
Importer av Text Field
Repos med Text Field
Senaste installerade version av Text Field
Äldsta installerade version av Text Field