## Default

Inputs collect data from the user.

```html
<syn-input spellcheck=""></syn-input>
```

---

## Labels

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

```html
<syn-input label="What is your name?"></syn-input>
```

---

## Help Text

Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.The help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.

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

---

## Placeholders

Use the placeholder attribute to add a placeholder.

```html
<syn-input placeholder="Type something"></syn-input>
```

---

## Clearable

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

```html
<syn-input value="Clearable" placeholder="Clearable" clearable=""></syn-input>
```

---

## Toggle Password

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

```html
<syn-input
  type="password"
  placeholder="Password Toggle"
  password-toggle=""
></syn-input>
```

---

## Readonly Inputs

Add the readonly attribute to draw a read-only input.

```html
<syn-input value="Readonly content" readonly=""></syn-input>
```

---

## Focus

The focus attribute provides feedback to the users, informing them that the input component is ready for use.

```html
<div style="padding: 5px">
  <form>
    <syn-input
      help-text="This input is focused."
      label="Label"
      placeholder="Insert text here..."
    ></syn-input>
  </form>
</div>
```

---

## Disabled

Use the disabled attribute to disable an input.

```html
<syn-input
  placeholder="Disabled"
  help-text="Help Text"
  label="Label"
  disabled=""
>
  <syn-icon name="home" slot="prefix"></syn-icon>
  <syn-icon name="chat" slot="suffix"></syn-icon>
</syn-input>
```

---

## Sizes

Use the size attribute to change an input's size.

```html
<syn-input placeholder="Small" size="small"></syn-input><br />
<syn-input placeholder="Medium" size="medium"></syn-input><br />
<syn-input placeholder="Large" size="large"></syn-input>
```

---

## Invalid

The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.

```html
<form
  onsubmit="
    event.preventDefault();
    event.stopPropagation();
  "
  id="components-syn-input--invalid"
>
  <syn-input
    help-text="This input is required."
    label="Label"
    placeholder="Insert text here..."
    required=""
  ></syn-input>

  <syn-button type="submit" variant="filled">Submit</syn-button>
</form>
<style>
  #components-syn-input--invalid {
    display: flex;
    flex-direction: column;
    gap: var(--syn-spacing-large);
  }
  syn-button {
    align-self: flex-start;
  }
</style>
```

---

## Input Types

The type attribute controls the type of input the browser renders.

```html
<syn-input type="email" placeholder="Email"></syn-input><br />
<syn-input type="number" placeholder="Number"></syn-input><br />
<syn-input type="date" placeholder="Date"></syn-input>
```

---

## Prefix Suffix Text And Icons

Use the prefix and suffix slots to add text and icons.

```html
<syn-input placeholder="Small" size="small">
  <span slot="prefix">prefix</span>
  <span slot="suffix">suffix</span>
</syn-input>
<br />
<syn-input placeholder="Medium" size="medium">
  <span slot="prefix">prefix</span>
  <span slot="suffix">suffix</span>
</syn-input>
<br />
<syn-input placeholder="Large" size="large">
  <span slot="prefix">prefix</span>
  <span slot="suffix">suffix</span>
</syn-input>
<br />
<syn-input placeholder="Small" size="small">
  <syn-icon name="wallpaper" slot="prefix"></syn-icon>
  <syn-icon name="wallpaper" slot="suffix"></syn-icon>
</syn-input>
<br />
<syn-input placeholder="Medium" size="medium">
  <syn-icon name="wallpaper" slot="prefix"></syn-icon>
  <syn-icon name="wallpaper" slot="suffix"></syn-icon>
</syn-input>
<br />
<syn-input placeholder="Large" size="large">
  <syn-icon name="wallpaper" slot="prefix"></syn-icon>
  <syn-icon name="wallpaper" slot="suffix"></syn-icon>
</syn-input>
```

---

## Customizing Label Position

Use to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.

```html
<syn-input
  class="label-on-left"
  label="Name"
  help-text="Enter your name"
></syn-input>
<syn-input
  class="label-on-left"
  label="Email"
  type="email"
  help-text="Enter your email"
></syn-input>
<syn-textarea
  class="label-on-left"
  label="Bio"
  help-text="Tell us something about yourself"
></syn-textarea>

<style>
  .label-on-left {
    --label-width: 3.75rem;
    --gap-width: 1rem;
  }

  .label-on-left + .label-on-left {
    margin-top: var(--syn-spacing-medium);
  }

  .label-on-left::part(form-control) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--syn-spacing-3x-small) var(--gap-width);
    align-items: center;
  }

  .label-on-left::part(form-control-label) {
    text-align: right;
    margin-bottom: 0;
  }

  .label-on-left::part(form-control-help-text) {
    grid-column-start: 2;
  }
</style>
```

---

## Stepper

The Stepper (Input type number) attribute has additional step buttons at the right side for incrementing and decrementing values. It is ideal for situations where users need to adjust quantities or settings within a range.

```html
<syn-input type="number" min="0" max="10" value="0"></syn-input>
<br />
<syn-input type="number" min="0" max="10" value="2"></syn-input>
<br />
<syn-input type="number" min="0" max="10" value="10"></syn-input>
```

---

## Stepper Input Handling

The numeric-strategy property defines how numeric input is handled during user interaction. It lets you select between the browsers native control and Synergy’s enhanced number-input logic.native: Uses the browser’s built-in number control. Values are not auto-clamped, and stepping/validation can vary across browsers.modern: Provides a more intuitive and predictable behavior by automatically clamping values to the nearest min/max value, including those bounds when stepping, and ignoring the step attribute during validation.

```html
<syn-input
  label="Native (min and max)"
  max="10"
  min="0"
  numeric-strategy="native"
  step="0.3"
  type="number"
  value="0"
></syn-input>
<br />
<syn-input
  label="Modern (min and max)"
  max="10"
  min="0"
  numeric-strategy="modern"
  step="0.3"
  type="number"
  value="0"
></syn-input>
```
