Text input

Adapted

Default

A default input lets users enter a single line of text.

National Insurance number

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <label class="govuk-label" for="input-default">National Insurance number</label>
  <input class="govuk-input" type="text" id="input-default" name="input-default">
</div>

---
import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <InputLabel for="input-default">National Insurance number</InputLabel>
  <Input id="input-default" name="input-default" />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel htmlFor="input-default">National Insurance number</InputLabel>
      <Input id="input-default" name="input-default" />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <InputLabel for="input-default">National Insurance number</InputLabel>
  <Input id="input-default" name="input-default" />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel for="input-default">National Insurance number</InputLabel>
      <Input id="input-default" name="input-default" />
    </FormGroup>
  );
}

Subtle

Use a subtle input to reduce its prominence when it is not the main focus of the page.

National Insurance number

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <label class="govuk-label" for="input-subtle">National Insurance number</label>
  <input class="govuk-input govuk-input--subtle" type="text" id="input-subtle" name="input-subtle">
</div>

---
import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <InputLabel for="input-subtle">National Insurance number</InputLabel>
  <Input id="input-subtle" name="input-subtle" subtle />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel htmlFor="input-subtle">National Insurance number</InputLabel>
      <Input id="input-subtle" name="input-subtle" subtle />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <InputLabel for="input-subtle">National Insurance number</InputLabel>
  <Input id="input-subtle" name="input-subtle" subtle />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel for="input-subtle">National Insurance number</InputLabel>
      <Input id="input-subtle" name="input-subtle" subtle />
    </FormGroup>
  );
}

With hint

Add a hint to give users extra help to answer the question.

National Insurance number

It’s on your National Insurance card, benefit letter, payslip or P60.

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <label class="govuk-label" for="input-hint">National Insurance number</label>
  <div class="govuk-hint" id="input-hint-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60.
  </div>
  <input class="govuk-input" type="text" id="input-hint" name="input-hint" aria-describedby="input-hint-hint">
</div>

---
import { FormGroup, InputLabel, Hint, Input } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <InputLabel for="input-hint">National Insurance number</InputLabel>
  <Hint id="input-hint-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60.
  </Hint>
  <Input
    id="input-hint"
    name="input-hint"
    aria-describedby="input-hint-hint"
  />
</FormGroup>

import { FormGroup, InputLabel, Hint, Input } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel htmlFor="input-hint">National Insurance number</InputLabel>
      <Hint id="input-hint-hint">
        It’s on your National Insurance card, benefit letter, payslip or P60.
      </Hint>
      <Input
        id="input-hint"
        name="input-hint"
        aria-describedby="input-hint-hint"
      />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Hint, Input } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <InputLabel for="input-hint">National Insurance number</InputLabel>
  <Hint id="input-hint-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60.
  </Hint>
  <Input
    id="input-hint"
    name="input-hint"
    aria-describedby="input-hint-hint"
  />
</FormGroup>

import { FormGroup, InputLabel, Hint, Input } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel for="input-hint">National Insurance number</InputLabel>
      <Hint id="input-hint-hint">
        It’s on your National Insurance card, benefit letter, payslip or P60.
      </Hint>
      <Input
        id="input-hint"
        name="input-hint"
        aria-describedby="input-hint-hint"
      />
    </FormGroup>
  );
}

Fixed width

Use a fixed width input when the content has a known, fixed length.

National Insurance number

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width">National Insurance number</label>
  <input class="govuk-input govuk-input--width-10" type="text" id="input-width" name="input-width">
</div>

---
import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <InputLabel for="input-width">National Insurance number</InputLabel>
  <Input id="input-width" name="input-width" width={10} />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel htmlFor="input-width">National Insurance number</InputLabel>
      <Input id="input-width" name="input-width" width={10} />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <InputLabel for="input-width">National Insurance number</InputLabel>
  <Input id="input-width" name="input-width" width={10} />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel for="input-width">National Insurance number</InputLabel>
      <Input id="input-width" name="input-width" width={10} />
    </FormGroup>
  );
}

Error

An error input is used to indicate that the input has an error.

National Insurance number

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="input-error">National Insurance number</label>
  <input class="govuk-input govuk-input--error" type="text" id="input-error" name="input-error">
</div>

---
import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup class="govuk-form-group--error">
  <InputLabel for="input-error">National Insurance number</InputLabel>
  <Input id="input-error" name="input-error" error />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup className="govuk-form-group--error">
      <InputLabel htmlFor="input-error">National Insurance number</InputLabel>
      <Input id="input-error" name="input-error" error />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup class="govuk-form-group--error">
  <InputLabel for="input-error">National Insurance number</InputLabel>
  <Input id="input-error" name="input-error" error />
</FormGroup>

import { FormGroup, InputLabel, Input } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup class="govuk-form-group--error">
      <InputLabel for="input-error">National Insurance number</InputLabel>
      <Input id="input-error" name="input-error" error />
    </FormGroup>
  );
}

When to use this component

Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.

When not to use this component

Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the Textarea component.