Search the design system

Components – legacy

Text input

Examples of text input with built-in custom validation.

Open console to view validations

<Form
  isVertical
  onSubmit={function noRefCheck() {}}
  onValidate={function noRefCheck() {}}
>
  <TextInput
    name="textExample1"
    onChange={function noRefCheck() {}}
    value=""
  />
  <Button
    block
    className="mt-3"
    inverted
    size={300}
    type="submit"
  >
    Validera
  </Button>
  <p>
    Open console to view validations
  </p>
</Form>

Properties

TextInput

Prop nameTypeDefault ValueDescription
errorMessageMaxstring'Texten är för lång.'
errorMessageMinstring'Texten är för kort.'
errorMessageRequiredstring'Du måste ange en text.'
isRequiredbooltrue
labelstring'Text'
helpMessagestring
infoMessagestring
isLessSpacebool
isMultilinebool
maxnumber
minnumber
name *string
onBlurfunc
onChange *func
onFocusfunc
showCharCounterbool
validateFnfunc
value *union

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Read more about WCAG 2.1 AA.

Components / Input fieldsText input / Usage
Components / Input fieldsTime input / Usage

© DesignTech - AB Svenska Spel

What's newTerms of useAccessibility statementCookiesTeams channel [Internal]
@svs/ui version
2.3.0

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se