Input

Examples

Basic

Inputs collect data from the user.

<ods-input></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput></OdsInput>
  )
}

export default Example;

Label

Use the label attribute to give the input an accessible label. For labels that contain HTML, use the label slot instead.

<ods-input label="What is your name?"></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput label="What is your name?"></OdsInput>
  )
}

export default Example;

Help Text

Add descriptive help text to an input with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

<ods-input label="Nickname" help-text="What would you like people to call you?"></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput
      label="Nickname"
      help-text="What would you like people to call you?">
    </OdsInput>
  )
}

export default Example;

Placeholders

Use the placeholder attribute to add a placeholder.

<ods-input placeholder="Placeholder text"></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput placeholder="Placeholder text"></OdsInput>
  )
}

export default Example;

Count

Use the maxlength and show-count-text attributes together to show a text counter while the user types into the input.

<ods-input show-count-text maxlength="5"></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput
      show-count-text
      maxlength={5}>
    </OdsInput>
  )
}

export default Example;

Prefix & Suffix Icons

<ods-input placeholder="Search">
  <ods-icon name="search" slot="prefix"></ods-icon>
  <ods-icon name="menu" slot="suffix"></ods-icon>
</ods-input>

import { OdsInput } from '@ods/components/react.input';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsInput placeholder="Search">
      <OdsIcon name="search" slot="prefix"></OdsIcon>
      <OdsIcon name="menu" slot="suffix"></OdsIcon>
    </OdsInput>
  )
}

export default Example;

Required

Use the required attribute to specify the input is a required field when using within a form.

<ods-input required label="Label">
</ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput
      required
      label="Label">
    </OdsInput>
  )
}

export default Example;

Disabled

Use the disabled attribute to disable an input.

<ods-input disabled help-text="Sample help text" required label="Label" maxlength="5" show-count-text></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput
      disabled
      help-text="Sample help text"
      required
      label="Label"
      maxlength={5}
      show-count-text>
    </OdsInput>
  )
}

export default Example;

Read Only

Use the readonly attribute to make an input read-only.

<ods-input readonly help-text="Sample help text" label="Label" maxlength="5" show-count-text value="abc"></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput
      readonly
      help-text="Sample help text"
      label="Label"
      maxlength={5}
      show-count-text
      value='abc'>
    </OdsInput>
  )
}

export default Example;

Error

Use the error-text attribute to customize the error message shown. Read more about error validation here .

<form novalidate>
    <ods-input error-text="Sample error text" required label="Label" maxlength="5" show-count-text></ods-input>
</form>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <form noValidate>
      <OdsInput
        error-text="Sample error text"
        required
        label="Label"
        maxlength={5}
        show-count-text>
      </OdsInput>
    </form>
  )
}

export default Example;

Clearable

Add the clearable attribute to add a clear button when the input has content.

<ods-input placeholder="Clearable" clearable value="abc"></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput placeholder="Clearable" clearable value='abc'></OdsInput>
  )
}

export default Example;

Toggle Password

Add the password-toggle attribute to add a toggle button that will show the password when activated.

<ods-input type="password" placeholder="Password Toggle" password-toggle></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <OdsInput
      type="password"
      placeholder="Password Toggle"
      password-toggle>
    </OdsInput>
  )
}

export default Example;

Input Types

<ods-input type="email" placeholder="Email"></ods-input>
<br />
<ods-input type="number" placeholder="Number"></ods-input>

import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  return (
    <>
      <OdsInput type="email" placeholder="Email"></OdsInput>
      <br />
      <OdsInput type="number" placeholder="Number"></OdsInput>
    </>
  )
}

export default Example;

Handling An Event

You can listen for the ods-input event to determine when an input is updated. To see other input events check out the events below . You can also see how inputs are used in forms by checking out the form section .

<ods-input id="input-example"></ods-input>

<script>
  const input = document.getElementById('input-example');

  const onInputHandler = (event) => {
    const target = event.target;

    alert(`Input value is ${target.value}`);
  };

  input.addEventListener('ods-input', (event) => onInputHandler(event));
</script>

import { OdsInput } from '@ods/components/react.input';
import { OdsInputEvent } from '@ods/components/react';

export const Example = () => {
  const onInputHandler = (event: OdsInputEvent) => {
    const target = event.target as HTMLInputElement;

    alert(`Input value is ${target.value}`);
  };

  return (
    <OdsInput onOdsInput={onInputHandler}></OdsInput>
  )
}

export default Example;

Importing

import '@ods/components/web.input';

import { OdsInput } from '@ods/components/react.input';

import { OdsInput } from '@ods/components/react.input';