Last modified: May 28, 2024

Input

🚧 This documentation is a work in progress.

Usage

Anatomy

Properties

The following is an autogenerated list of the properties available for Input based on the component’s JSON schema file (linked below).

We are currently updating how we implement components, and the list of properties may not be entirely accurate.

JSON schema

Required properties: id,type,dataModelBindings

PropertyTypeDescription

id

stringThe component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>.

type

stringThe component type.

dataModelBindings

objectData model bindings for component
dataModelBindings.simpleBindingstringData model binding for components connection to a single field in the data model

textResourceBindings

objectText resource bindings for a component.
textResourceBindings.descriptionstringThe description text for the component
textResourceBindings.helpstringThe help text for the component
textResourceBindings.titlestringThe title/label text for the component

required

booleanBoolean or expression indicating if the component is required when filling in the form. Defaults to false.

readOnly

booleanBoolean or expression indicating if the component should be presented as read only. Defaults to false.

autocomplete

stringThe HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
Enum: [on, off, name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, 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, url, photo]

formatting

objectSet of options for formatting input fields.
formatting.alignstringThe alignment for Input field (eg. right aligning a series of numbers).
Enum: [left, center, right]
formatting.currencystringEnables currency along with thousand and decimal separators to be language sensitive based on selected app language. They are configured in number property. Note: parts that already exist in number property are not overridden by this prop.
Enum: [AED, AFN, ALL, AMD, ANG, AOA, ARS, AUD, AWG, AZN, BAM, BBD, BDT, BGN, BHD, BIF, BMD, BND, BOB, BOV, BRL, BSD, BTN, BWP, BYN, BZD, CAD, CDF, CHE, CHF, CHW, CLF, CLP, CNY, COP, COU, CRC, CUC, CUP, CVE, CZK, DJF, DKK, DOP, DZD, EGP, ERN, ETB, EUR, FJD, FKP, GBP, GEL, GHS, GIP, GMD, GNF, GTQ, GYD, HKD, HNL, HTG, HUF, IDR, ILS, INR, IQD, IRR, ISK, JMD, JOD, JPY, KES, KGS, KHR, KMF, KPW, KRW, KWD, KYD, KZT, LAK, LBP, LKR, LRD, LSL, LYD, MAD, MDL, MGA, MKD, MMK, MNT, MOP, MRU, MUR, MVR, MWK, MXN, MXV, MYR, MZN, NAD, NGN, NIO, NOK, NPR, NZD, OMR, PAB, PEN, PGK, PHP, PKR, PLN, PYG, QAR, RON, RSD, RUB, RWF, SAR, SBD, SCR, SDG, SEK, SGD, SHP, SLE, SLL, SOS, SRD, SSP, STN, SVC, SYP, SZL, THB, TJS, TMT, TND, TOP, TRY, TTD, TWD, TZS, UAH, UGX, USD, USN, UYI, UYU, UYW, UZS, VED, VES, VND, VUV, WST, XAF, XCD, XDR, XOF, XPF, XSU, XUA, YER, ZAR, ZMW, ZWL]
formatting.positionstringDisplay the unit as prefix or suffix. Default is prefix
Enum: [prefix, suffix]
formatting.unitstringEnables unit along with thousand and decimal separators to be language sensitive based on selected app language. They are configured in number property. Note: parts that already exist in number property are not overridden by this prop.
Enum: [celsius, centimeter, day, degree, foot, gram, hectare, hour, inch, kilogram, kilometer, liter, meter, milliliter, millimeter, millisecond, minute, month, percent, second, week, year]
gridSettings.innerGridgridPropsOptional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width.
Example(s): {xs: 12}
See: gridProps
gridSettings.labelGridgridPropsOptional grid for the component label. Used in combination with innerGrid to align labels on the side.
Example(s): {xs: 12}
See: gridProps

hidden

booleanBoolean value or expression indicating if the component should be hidden. Defaults to false.

labelSettings

objectA collection of settings for how the component label should be rendered.
labelSettings.optionalIndicatorbooleanControls whether the text that is indicating that a field is optional should be displayed.

maxLength

numberMaximum length of input field

pageBreak

object
pageBreak.breakAfterstringPDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid
pageBreak.breakBeforestringPDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid

renderAsSummary

booleanBoolean or expression indicating if the component should be rendered as a summary. Defaults to false.

saveWhileTyping

Boolean or number. True = feature on (default), false = feature off (saves on focus blur), number = timeout in milliseconds (400 by default)

triggers

arrayAn array of actions that should be triggered when data connected to this component changes.

variant

stringAn enum to choose if the inputfield it is a normal textfield or a searchbar
Enum: [text, search]

Configuration

We are currently updating Altinn Studio Designer with more configuration options! The documentation is continuously updated, and there may be more settings available than what is described here, and some settings may be in beta version.

Add component

    You can add a component in Altinn Studio Designer by dragging it from the list of components to the page area. Selecting the component brings up its configuration panel.

    Basic component:

    App/ui/layouts/{page}.json
    {
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  {
    "data": {
      "layout": [
        {
          // Basic component (required properties)
        }
      ]
    }
  }
}

    Examples