> For the complete documentation index, see [llms.txt](https://neptune-css.gitbook.io/neptune-css-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://neptune-css.gitbook.io/neptune-css-docs/components/inputs.md).

# Inputs

{% code title="Default Input Field" %}

```html
<div class="input-box">
    <label class="text-m" for="default-input">Input:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="text" name="default-input" id="default-input" placeholder="Default input">
    </div>
    <span class="text-s input-validation">
        Validation text
    </span>
</div>
```

{% endcode %}

{% embed url="<https://codepen.io/neptunecss/pen/GRYYwbx>" %}
Default input example
{% endembed %}

## Styles

{% tabs %}
{% tab title="Information" %}

```html
<div class="input-box">
	<label class="text-m" for="default-input">Input:</label>
	<div class="input-field input-field-info">
		<span class="input-icon">
			<!-- Your Icon -->
		</span>
		<input class="input-info" type="text" name="default-input" id="default-input" placeholder="Default input">
	</div>
	<span class="text-s input-validation validation-info">
		Information
	</span>
</div>
```

{% endtab %}

{% tab title="Success" %}

```html
<div class="input-box">
	<label class="text-m" for="default-input">Input:</label>
	<div class="input-field input-field-success">
		<span class="input-icon">
			<!-- Your Icon -->
		</span>
		<input class="input-success" type="text" name="default-input" id="default-input" placeholder="Default input">
	</div>
	<span class="text-s input-validation validation-success">
		Success
	</span>
</div>
```

{% endtab %}

{% tab title="Warning" %}

```html
<div class="input-box">
	<label class="text-m" for="default-input">Input:</label>
	<div class="input-field input-field-warning">
		<span class="input-icon">
			<!-- Your Icon -->
		</span>
		<input class="input-warning" type="text" name="default-input" id="default-input" placeholder="Default input">
	</div>
	<span class="text-s input-validation validation-warning">
		Warning
	</span>
</div>
```

{% endtab %}

{% tab title="Error" %}

```html
<div class="input-box">
	<label class="text-m" for="default-input">Input:</label>
	<div class="input-field input-field-error">
		<span class="input-icon">
			<!-- Your Icon -->
		</span>
		<input class="input-error" type="text" name="default-input" id="default-input" placeholder="Default input">
	</div>
	<span class="text-s input-validation validation-error">
		Error
	</span>
</div>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/qBJJLZj?editors=1000>" %}
Input styles example
{% endembed %}

## Password Input

{% tabs %}
{% tab title="HTML" %}

```html
<div class="input-box password-input-box">
    <label class="text-m" for="password-input">Password:</label>
    <div class="input-field password-input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="password" name="password-input" id="password-input" placeholder="Password">
        <button class="show-password-button" id="show-password-button" onclick="showPassword()">
            <span class="button-icon" id="show-password-button-icon">
                <!-- Your Icon -->
            </span>
        </button>
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>
```

{% endtab %}

{% tab title="JavaScript" %}

```javascript
const passwordInput = document.getElementById('password-input');
const showPasswordButton = document.getElementById('show-password-button');
const showPasswordButtonIcon = document.getElementById('show-password-button-icon');

const eyeOpen = '<!-- Your Icon -->';
const eyeClosed = '<!-- Your Icon -->';

function showPassword() {
    // Show password
    if(passwordInput.type === 'password') {
        passwordInput.type = 'text';
    }

    // Change button icon
    showPasswordButtonIcon.innerHTML = '';
    showPasswordButtonIcon.innerHTML = eyeClosed;

    // Change onclick event
    showPasswordButton.setAttribute('onclick', 'hidePassword()');
}

function hidePassword() {
    // Hide password
    if(passwordInput.type === 'text') {
        passwordInput.type = 'password';
    }

    // Change button icon
    showPasswordButtonIcon.innerHTML = '';
    showPasswordButtonIcon.innerHTML = eyeOpen;

    // Change onclick event
    showPasswordButton.setAttribute('onclick', 'showPassword()');
}
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/JjmmwZM>" %}
Password input example
{% endembed %}

## Search Bar

```html
<div class="searchbar-box">
    <input type="text" class="searchbar" name="searchbar" id="mySearchbar" placeholder="Search">
    <button class="search-button">
        <span class="button-icon">
            <!-- Your Icon -->
        </span>
    </button>
</div>
```

{% embed url="<https://codepen.io/neptunecss/pen/yLRRGZa>" %}
Search bar example
{% endembed %}

## Select Input

```html
<div class="select-box" id="mySelect">
    <span class="text-l">Select</span>
    <select class="hidden-select">
        <option value="null">Select</option>
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select>
</div>
```

{% embed url="<https://codepen.io/neptunecss/pen/OJaPgyX>" %}
Select input example
{% endembed %}

## Pin Input

{% tabs %}
{% tab title="HTML" %}

```html
<div class="digit-box">
    <div class="digit-field-group">
        <input type="number" class="digit-field" name="digit1" id="digit1">
        <input type="number" class="digit-field" name="digit2" id="digit2">
        <input type="number" class="digit-field" name="digit3" id="digit3">
        <input type="number" class="digit-field" name="digit4" id="digit4">
    </div>
    <button type="submit" class="button-m submit-button button-primary" id="submit-digits-button" name="auth-button">
        <span class="button-icon">
            <!-- Your Icon -->
        </span>    
        Authenticate
    </button>
</div>
```

{% endtab %}

{% tab title="JavaScript" %}

```javascript
const submitButton = document.getElementById('submit-digits-button');
const digit1 = document.getElementById('digit1');
const digit2 = document.getElementById('digit2');
const digit3 = document.getElementById('digit3');
const digit4 = document.getElementById('digit4');

digit1.oninput = function() {
    if(digit1.value.length >= 1) {
        digit2.focus();
    }
};

digit2.oninput = function() {
    if(digit2.value.length >= 1) {
        digit3.focus();
    }
};

digit3.oninput = function() {
    if(digit3.value.length >= 1) {
        digit4.focus();
    }
};

digit4.oninput = function() {
    if(digit4.value.length >= 1) {
        submitButton.focus();
    }
};
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/bGmmzEE>" %}
Pin input example
{% endembed %}

## More Input Fields

{% tabs %}
{% tab title="Email Input" %}

```html
<div class="input-box email-box">
    <label class="text-m" for="email-input">Email:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="email" inputmode="email" name="email-input" id="email-input" placeholder="mail@example.com">
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>
```

{% endtab %}

{% tab title="Phone Input" %}

```html
<div class="input-box">
    <label class="text-m" for="phone-input">Phone:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="tel" inputmode="tel" name="phone-input" id="phone-input" placeholder="+01 234 56789">
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>
```

{% endtab %}

{% tab title="URL Input" %}

```html
<div class="input-box">
    <label class="text-m" for="url-input">URL:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="url" inputmode="url" name="url-input" id="url-input" placeholder="https://yourdomain.com">
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/eYPPxNG>" %}
More input field examples
{% endembed %}

## Checkboxes

{% code title="Default Checkbox" %}

```html
<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox" name="default-checkbox" id="default-checkbox" checked>
	<label class="checkbox-label" for="default-checkbox" id="default-checkbox-label">
		Default checkbox
	</label>
</div>
```

{% endcode %}

{% tabs %}
{% tab title="Primary" %}

```html
<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-primary" name="checkbox-primary" id="checkbox-primary" checked>
	<label class="checkbox-label" for="checkbox-primary" id="primary-checkbox-label">
		Primary checkbox
	</label>
</div>
```

{% endtab %}

{% tab title="Accent" %}

```html
<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-accent" name="checkbox-accent" id="checkbox-accent" checked>
	<label class="checkbox-label" for="checkbox-accent" id="checkbox-accent-label">
		Accent checkbox
	</label>
</div>
```

{% endtab %}

{% tab title="Information" %}

```html
<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-information" name="checkbox-info" id="checkbox-info" checked>
	<label class="checkbox-label" for="checkbox-info" id="checkbox-info-label">
		Information checkbox
	</label>
</div>
```

{% endtab %}

{% tab title="Success" %}

```html
<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-success" name="checkbox-success" id="checkbox-success" checked>
	<label class="checkbox-label" for="checkbox-success" id="checkbox-success-label">
		Success checkbox
	</label>
</div>
```

{% endtab %}

{% tab title="Warning" %}

```html
<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-warning" name="checkbox-warning" id="checkbox-warning" checked>
	<label class="checkbox-label" for="checkbox-warning" id="checkbox-warning-label">
		Warning checkbox
	</label>
</div>
```

{% endtab %}

{% tab title="Error" %}

```html
<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-error" name="checkbox-error" id="checkbox-error" checked>
	<label class="checkbox-label" for="checkbox-error" id="checkbox-error-label">
		Error checkbox
	</label>
</div>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/yLRRZzz?editors=1000>" %}
Checkbox examples
{% endembed %}

## Radio Buttons

{% code title="Default Radio Button" %}

```html
<div class="input-box radio-box">
	<input type="radio" class="radio-button" name="radio-button-default" id="radio-button-default">
	<label for="radio-button-default" class="radio-button-label">
		Default radio button
	</label>
</div>
```

{% endcode %}

{% tabs %}
{% tab title="Primary" %}

```html
<div class="input-box radio-box">
	<input type="radio" class="radio-button radio-button-primary" name="radio-button-primary" id="radio-button-primary">
	<label for="radio-button-primary" class="radio-button-label">
		Primary radio button
	</label>
</div>
```

{% endtab %}

{% tab title="Accent" %}

```html
<div class="input-box radio-box">
	<input type="radio" class="radio-button radio-button-accent" name="radio-button-accent" id="radio-button-accent">
	<label for="radio-button-accent" class="radio-button-label">
		Accent radio button
	</label>
</div>
```

{% endtab %}

{% tab title="Information" %}

```html
<div class="input-box radio-box">
	<input type="radio" class="radio-button radio-button-info" name="radio-button-info" id="radio-button-info">
	<label for="radio-button-info" class="radio-button-label">
		Information radio button
	</label>
</div>
```

{% endtab %}

{% tab title="Success" %}

```html
<div class="input-box radio-box">
	<input type="radio" class="radio-button radio-button-success" name="radio-button-success" id="radio-button-success">
	<label for="radio-button-success" class="radio-button-label">
		Success radio button
	</label>
</div>
```

{% endtab %}

{% tab title="Warning" %}

```html
<div class="input-box radio-box">
	<input type="radio" class="radio-button radio-button-warning" name="radio-button-warning" id="radio-button-warning">
	<label for="radio-button-warning" class="radio-button-label">
		Warning radio button
	</label>
</div>
```

{% endtab %}

{% tab title="Error" %}

```html
<div class="input-box radio-box">
	<input type="radio" class="radio-button radio-button-error" name="radio-button-error" id="radio-button-error">
	<label for="radio-button-error" class="radio-button-label">
		Error radio button
	</label>
</div>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/OJBBdxM?editors=1000>" %}
Radio button examples
{% endembed %}