---
id: text-input
title: TextInput
---

# TextInput

## How to use

<code src="@digigov/ui/src/form/TextInput/__stories__/Default.tsx" />

### For multiple questions

If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.

<code src="@digigov/ui/src/form/TextInput/__stories__/MultipleQuestions.tsx" />

### Fixed width inputs

Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.

The widths are designed for specific character lengths and to be consistent across a range of browsers. They include extra padding to fit icons that some browsers might insert into the input (for example to show or generate a password).

On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.

<code src="@digigov/ui/src/form/TextInput/__stories__/FixedWidths.tsx" />

### Fluid width inputs

Fluid width inputs will resize with the viewport.

<code src="@digigov/ui/src/form/TextInput/__stories__/FluidWidths.tsx" />

### Hint text

Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.

<code src="@digigov/ui/src/form/TextInput/__stories__/WithHint.tsx" />

### Asking for numbers

<code src="@digigov/ui/src/form/TextInput/__stories__/AskingForNumbers.tsx" />

### Error message

Error messages should be styled like this:

<code src="@digigov/ui/src/form/TextInput/__stories__/WithErrorMessage.tsx" />

### Disabled input

<code src="@digigov/ui/src/form/TextInput/__stories__/DisabledInput.tsx" />

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={["TextInput"]} />