# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://neptune-css.gitbook.io/neptune-css-docs/components/inputs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.