NewsKit Mobile Logo

Text Input

Overview

The Text Input component consists of a label, input and assistive text.

Usage

Text Input allows users to enter text into a UI. They typically appear in forms and dialogs.

Props

Text Input has a number of props to facilitate a variety of uses:

sizeTextInputSize = TextInputSize.medium
Optional size of the Text Input: Small, Medium or Large.
labelstring
Label text is used to inform users as to what information is requested for a text input. Every text input field should have a label.
namestring
The name indentifier of the input field. It is required when the input is used inside a Form component.
hideLabelboolean = false
A prop can be set on the Text Input component to visually hide the label. The label should remain readable by screen readers by setting the arial label attribute on the input to the value of the label text.
assistiveTextstring
Assistive text gives context about a field’s input, such as how the input will be used. It will be displayed beneath the text input.
disabledboolean = false
If true, the Text Input will render the disabled state of the style preset.
readOnlyboolean = false
If true, the Text Input will render the read only state of the style preset.
ariaLabelstring
The aria-label attribute for the text input. As stated above, if the label is hidden, the label text will be placed into the aria label attribute of the input However, this can be overridden if the consumer sets aria-label prop.
rulesobject
The text input can take validation rules. The validation only works if the input is inside a Form component. For more information please see the Form component.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
widthstring
If provided, this sets a fixed width to the text input. This can be a sizing token from the theme, or any CSS length value, e.g. 100% for a full-width element.
inputobject
placeholderstring
If provided, this overrides the placeholder text applied to the text input.
stylePresetMQ<string>
If provided, this overrides the style preset applied to the text input.
spaceInsetMQ<string>
If provided, this overrides the padding of the Text Input. Otherwise, spaceInsetSquish010 or spaceInset030 is used depending on the `size` prop.
typographyPresetMQ<string>
If provided, this overrides the type preset applied to the text input. Otherwise, utilityBody020 or utilityBody030 is used depending on the `size` prop.
spaceStackMQ<string>
This is a spacing preset token which is applied as a margin on the bottom of the Block. Use this to space stacking content down the page.
minHeightstring
If provided, this sets a minimum height to the Text Input. This can be a sizing token from the theme, or any CSS length value. By default, sizing060, sizing080 or sizing090 is used depending on the `size` prop.
iconSpaceSpacingPresetKeys
Applies space between the validation icon and right side of the input field.
spaceInsetRightSpacingPresetKeys
This spacing value overrides the padding value (applied by the spaceInset token) on the right of the input when the validation icon is showing. This avoids any input text rendering behind the icon.
inputLabelobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the text input label.
typographyPresetMQ<string>
If provided, this overrides the type preset applied to the text input label. Otherwise, label030 or label040 is used depending on the `size` prop.
spaceInlineMQ<string>
This is a spacing preset token which is applied as a margin on the right of the text input label. Use this to space inline content across the page.
spaceStackMQ<string>
This is a spacing preset token which is applied as a margin on the bottom of the text input label. Use this to space stacking content down the page.
assistiveTextobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the assistive text.
typographyPresetMQ<string>
If provided, this overrides the type preset applied to the text input. Otherwise, utilityLabel020 or utilityLabel030 is used depending on the `size` prop.
minHeightstring
If provided, this sets a minimum height to the assistive text container. This is used to prevent the layout shift in page when the assistive text shows and hides.
Refer to the defaults below for the object structure:
{
  small: {
    label: {
      stylePreset: "inkContrast",
      typographyPreset: "utilityLabel030",
      spaceStack: "space040",
      spaceInline: "space010"
    },
    input: {
      stylePreset: "textInput",
      spaceInset: "spaceInset020",
      minHeight: "sizing060",
      typographyPreset: "utilityBody020",
      spaceStack: "space020",
      iconSize: "iconSize020",
      iconSpace: "space030",
      spaceInsetRight: "space070"
    },
    assistiveText: {
      stylePreset: "textInputAssistiveText",
      typographyPreset: "utilityLabel020",
      minHeight: "sizing030"
    }
  },
  medium: {
    label: {
      stylePreset: "inkContrast",
      typographyPreset: "utilityLabel030",
      spaceStack: "space040",
      spaceInline: "space010"
    },
    input: {
      stylePreset: "textInput",
      spaceInset: "spaceInset030",
      minHeight: "sizing080",
      typographyPreset: "utilityBody020",
      spaceStack: "space020",
      iconSize: "iconSize020",
      iconSpace: "space030",
      spaceInsetRight: "space070"
    },
    assistiveText: {
      stylePreset: "textInputAssistiveText",
      typographyPreset: "utilityLabel020",
      minHeight: "sizing030"
    }
  },
  large: {
    label: {
      stylePreset: "inkContrast",
      typographyPreset: "utilityLabel030",
      spaceStack: "space040",
      spaceInline: "space010"
    },
    input: {
      stylePreset: "textInput",
      spaceInset: "spaceInset030",
      minHeight: "sizing090",
      typographyPreset: "utilityBody030",
      spaceStack: "space020",
      iconSize: "iconSize030",
      iconSpace: "space030",
      spaceInsetRight: "space080"
    },
    assistiveText: {
      stylePreset: "textInputAssistiveText",
      typographyPreset: "utilityLabel030",
      minHeight: "sizing030"
    }
  }
}

Playground

Props
Size
Style Preset
Typography Preset
Spacing Preset
Assistive Text
Placeholder
Hide Label
Width
Disabled
Read-only
import React from 'react';
import { TextInput } from 'newskit';

export default () => (
  <TextInput
    size="medium"
    overrides={{ label: {}, input: {}, assistiveText: {} }}
    placeholder="Placeholder"
  />
);