React Components

# Input

## Overview

---

## Anatomy

---

Input

---

## Input

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) . |
| 
clearable

 | `boolean` | - | `false` | Whether the clear button is displayed. |
| 

i18n

 | `Partial` | - | `undefined` | Internal translations override. |
| 

invalid

 | `boolean` | - | `undefined` | Whether the component is in error state. |
| 

loading

 | `boolean` | - | `false` | Whether the component is in loading state. |
| 

locale

 | `LOCALE` | - | `undefined` | The locale used for the translation of the internal elements. |
| 

maskOption

 | `object` | - | `{ enable: false, initialState: INPUT_MASK_STATE.close }` | Masked display options. |
| 

enable

 | `boolean` |  | `-` | Whether the masked display is active. |
| 

initialState

 | `INPUT_MASK_STATE` | - | `-` | Initial state of the mask. |
| 

onClear

 | `() => void` | - | `undefined` | Callback fired when the input value is cleared. |
| 

type

 | `INPUT_TYPE` | - | `INPUT_TYPE.text` | The input type. |

## Enums

---

### INPUT_I18N

-   clearButton =`"input.clear.button"`
-   maskButtonHide =`"input.mask.hide.button"`
-   maskButtonShow =`"input.mask.show.button"`
-   searchButton =`"input.search.button"`

### INPUT_MASK_STATE

-   close =`"close"`
-   open =`"open"`

### INPUT_TYPE

-   email =`"email"`
-   number =`"number"`
-   password =`"password"`
-   search =`"search"`
-   text =`"text"`
-   time =`"time"`
-   url =`"url"`

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Input />
}
```

### Disabled

```jsx
{
  globals: {
    imports: `import { Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Input disabled />
}
```

### Readonly

```jsx
{
  globals: {
    imports: `import { Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Input defaultValue="Readonly" readOnly />
}
```

### Clearable

```jsx
{
  globals: {
    imports: `import { Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Input clearable defaultValue="Clearable" />
}
```

### Loading

```jsx
{
  globals: {
    imports: `import { Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Input loading />
}
```

### Masked

```jsx
{
  globals: {
    imports: `import { Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Input maskOption={{
    enable: true
  }} />
}
```

### Types

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'column',
    gap: '8px',
    alignItems: 'start'
  }}>{story()}</div>],
  globals: {
    imports: `import { INPUT_TYPE, Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Input type={INPUT_TYPE.email} placeholder="email" /><br />
      <Input type={INPUT_TYPE.number} placeholder="number" /><br />
      <Input type={INPUT_TYPE.password} placeholder="password" /><br />
      <Input type={INPUT_TYPE.search} placeholder="search" /><br />
      <Input type={INPUT_TYPE.text} placeholder="text" /><br />
      <Input type={INPUT_TYPE.time} placeholder="time" /><br />
      <Input type={INPUT_TYPE.url} placeholder="url" /><br />
    </>
}
```

### Floating number

```jsx
{
  globals: {
    imports: `import { INPUT_TYPE, Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Input defaultValue="9.99" step="any" type={INPUT_TYPE.number} />
}
```

### Datalist

```jsx
{
  globals: {
    imports: `import { Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Input list="ice-cream-flavors" />
      <datalist id="ice-cream-flavors">
        <option value="Chocolate"></option>
        <option value="Coconut"></option>
        <option value="Mint"></option>
        <option value="Strawberry"></option>
        <option value="Vanilla"></option>
      </datalist>
    </>
}
```

### Form field

```jsx
{
  globals: {
    imports: `import { FormField, FormFieldLabel, Input } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField>
      <FormFieldLabel>
        Name:      </FormFieldLabel>
      <Input />
    </FormField>
}
```

## Recipes

---

Dashboard Card

#### Cluster Information

---

Name

MyCluster

---

ID

---

Region

GRA91-AZ

---

Admission plugins

Always Pull Images PluginEnable

Plugin Node RestrictionEnable

---

Data Grid

| 
 | 

First Name

 | 

Last Name

 | 

Age

 | 

IP Address

 | 

Actions

 |
| --- | --- | --- | --- | --- | --- |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |

102550100300

of 0 results

Email Field

Email- mandatory

@

.fr.com.dev

The part before the email address (the text before the @) must follow these guidelines:

-   It must end with a letter or a number
-   Allowed special characters are: ".", "_", "-"
-   Special characters cannot be placed next to each other

Range Input

0100