Input
The Input component is text field that abstracts HTML5 native <input>'s and <textarea> elements.
Examples
Some useful help text can go here
It's impossible to have a string that is cool enough for this field.
Usage
React, Vue, and Svelte examples on a single playground page 🚀 💥
View in CodeSandbox 
View in Stackblitz 
React
View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import { Input } from "agnostic-react";
export const YourComponent = () => (
<>
<h3 class="mbs40 mbe24">Inputs</h3>
<section class="mbe24">
<Input
id="1"
size="small"
placeholder="Enter name…"
label="Small input"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="2"
placeholder="Enter name…"
label="Default input"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="3"
size="large"
placeholder="Enter name…"
label="Large input"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="4"
isInline
placeholder="Enter name…"
label="Inline input"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="4"
isRounded
placeholder="Enter name…"
label="Rounded input"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="6"
isUnderlined
placeholder="Enter name…"
label="Underlined input"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="7"
isUnderlined
isUnderlinedWithBackground
placeholder="Enter name…"
label="Underlined with background"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="10"
helpText="Some useful help text can go here"
placeholder="Enter something…"
label="Help text"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="9"
isInvalid
invalidText="It's impossible to have a string that is cool enough for this field."
placeholder="Enter a very cool string…"
label="Cool factor"
type="text"
/>
</section>
<section class="mbe24">
<Input
id="10"
hasLeftAddon
addOnLeft={
<Icon
size={18}
type="success"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M21.03 5.72a.75.75 0 010 1.06l-11.5 11.5a.75.75 0 01-1.072-.012l-5.5-5.75a.75.75 0 111.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 011.06 0z"
/>
</svg>
</Icon>
}
hasRightAddon
addOnRight={
<Icon
size={18}
type="info"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M13 7.5a1 1 0 11-2 0 1 1 0 012 0zm-3 3.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v4.25h.75a.75.75 0 010 1.5h-3a.75.75 0 010-1.5h.75V12h-.75a.75.75 0 01-.75-.75z" />
<path
fill-rule="evenodd"
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"
/>
</svg>
</Icon>
}
label="Input with addons"
/>
</section>
<section class="mbe24">
<Input
id="11"
label="Textarea"
type="textarea"
/>
</section>
<section class="mbe24">
<Input
id="12"
label="Textarea small"
type="textarea"
size="small"
rows={10}
cols={5}
/>
</section>
<section class="mbe24">
<Input
id="13"
label="Textarea large"
type="textarea"
size="large"
rows={10}
cols={5}
/>
</section>
</>
React: component source, storybook tests
Vue 3
View source
<script setup>
import { ref } from 'vue';
// Import AgnosticUI global common & component CSS
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Input, InputAddonItem } from "agnostic-vue";
const message = ref("");
const textAreaMessage = ref("");
</script>
<template>
<section>
<div class="h4"><code>v-model</code> test:</div>
{{ message }}
<Input
id="1"
v-model="message"
size="small"
placeholder="Enter name…"
label="Small input"
type="text"
/>
</section>
<section>
<Input
id="2"
placeholder="Enter name…"
label="Default input"
type="text"
/>
</section>
<section>
<Input
id="3"
size="large"
placeholder="Enter name…"
label="Large input"
type="text"
/>
</section>
<section>
<Input
id="4"
is-inline
placeholder="Enter name…"
label="Inline input"
type="text"
/>
</section>
<section>
<Input
id="4"
is-rounded
placeholder="Enter name…"
label="Rounded input"
type="text"
/>
</section>
<section>
<Input
id="6"
is-underlined
placeholder="Enter name…"
label="Underlined input"
type="text"
/>
</section>
<section>
<Input
id="7"
is-underlined
is-underlined-with-background
placeholder="Enter name…"
label="Underlined with background"
type="text"
/>
</section>
<section>
<Input
id="10"
help-text="Some useful help text can go here"
placeholder="Enter something…"
label="Help text"
type="text"
/>
</section>
<section>
<Input
id="9"
is-invalid
invalid-text="It's impossible to have a string that is cool enough for this field."
placeholder="Enter a very cool string…"
label="Cool factor"
type="text"
/>
</section>
<section>
<Input
id="8"
v-model="name"
has-left-addon
has-right-addon
label="Input with addons"
>
<template #addonLeft>
<InputAddonItem addon-left>
<Icon
:size="18"
type="success"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M21.03 5.72a.75.75 0 010 1.06l-11.5 11.5a.75.75 0 01-1.072-.012l-5.5-5.75a.75.75 0 111.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 011.06 0z"
/>
</svg>
</Icon>
</InputAddonItem>
</template>
<template #addonRight>
<InputAddonItem addon-right>
<Icon
:size="18"
type="info"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M13 7.5a1 1 0 11-2 0 1 1 0 012 0zm-3 3.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v4.25h.75a.75.75 0 010 1.5h-3a.75.75 0 010-1.5h.75V12h-.75a.75.75 0 01-.75-.75z" />
<path
fill-rule="evenodd"
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"
/>
</svg>
</Icon>
</InputAddonItem>
</template>
</Input>
</section>
<section class="mbe24">
<div class="h4"><code>v-model</code> textarea test:</div>
{{ textAreaMessage }}
<Input
v-model="textAreaMessage"
id="11"
label="Textarea"
type="textarea"
/>
</section>
<section class="mbe24">
<Input
id="12"
label="Textarea small"
type="textarea"
size="small"
:rows="10"
:cols="5"
/>
</section>
<section class="mbe24">
<Input
id="13"
label="Textarea large"
type="textarea"
size="large"
:rows="10"
cols="5"
/>
</section>
</template>
Vue 3: component source, storybook tests
Svelte
View source
<script>
import 'agnostic-svelte/css/common.min.css';
import { Input, InputAddonItem } from "agnostic-svelte";
let valueText = '';
let addonValueText = '';
let textareaValueText = '';
</script>
<section>
<div class="h4 w-100">Input</div>
<div><code>bind:value</code> test: {valueText}</div>
<Input bind:value={valueText} placeholder="type in here to verify bind:value" />
<Input uniqueId="1" label="Default input" />
<Input uniqueId="2" isRounded label="Rounded input" />
<Input uniqueId="3" isUnderlined label="Underlined input" />
<Input uniqueId="4" isUnderlined isUnderlinedWithBackground label="Underlined with background" />
<Input uniqueId="5" isInline label="Inline input" />
<Input uniqueId="6" size="small" label="Small input" />
<Input uniqueId="7" size="large" label="Large input" />
<Input uniqueId="8" helpText="Some useful help hint…" label="Large input" />
<Input uniqueId="9" isInvalid invalidText="Some error hint…" label="Large input" />
<div><code>bind:value</code> when using input addons: {addonValueText}</div>
<Input
bind:value={addonValueText}
placeholder="type in here to verify bind:value"
hasLeftAddon="{true}"
hasRightAddon="{true}"
id="10"
label="Input with addons"
>
<div slot="addonLeft">
<InputAddonItem addonLeft="{true}"><span>L</span></InputAddonItem>
</div>
<div slot="addonRight">
<InputAddonItem addonRight="{true}"><span>R</span></InputAddonItem>
</div>
</Input>
<p class="mbs24">Dynamic Input (#114)</p>
<Input
hasRightAddon={true}
id="bug114"
type={textIsVisible ? 'text' : 'password'}
label="Password input toggle (visible / invisible)"
>
<div slot="addonRight">
<InputAddonItem addonRight={true}>
<Button isBlank on:click={toggleTextVisibility}>
{#if textIsVisible}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ion" width="1.125rem" height="1.125rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512" data-icon="ion:md-eye-off"><path d="M256.1 144.8c56.2 0 101.9 45.3 101.9 101.1 0 13.1-2.6 25.5-7.3 37l59.5 59c30.8-25.5 55-58.4 69.9-96-35.3-88.7-122.3-151.6-224.2-151.6-28.5 0-55.8 5.1-81.1 14.1l44 43.7c11.6-4.6 24.1-7.3 37.3-7.3zM52.4 89.7l46.5 46.1 9.4 9.3c-33.9 26-60.4 60.8-76.3 100.8 35.2 88.7 122.2 151.6 224.1 151.6 31.6 0 61.7-6.1 89.2-17l8.6 8.5 59.7 59 25.9-25.7L78.2 64 52.4 89.7zM165 201.4l31.6 31.3c-1 4.2-1.6 8.7-1.6 13.1 0 33.5 27.3 60.6 61.1 60.6 4.5 0 9-.6 13.2-1.6l31.6 31.3c-13.6 6.7-28.7 10.7-44.8 10.7-56.2 0-101.9-45.3-101.9-101.1 0-15.8 4.1-30.7 10.8-44.3zm87.8-15.7l64.2 63.7.4-3.2c0-33.5-27.3-60.6-61.1-60.6l-3.5.1z" fill="currentColor"></path></svg>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ion" width="1.125rem" height="1.125rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512" data-icon="ion:md-eye"><path d="M256 105c-101.8 0-188.4 62.4-224 151 35.6 88.6 122.2 151 224 151s188.4-62.4 224-151c-35.6-88.6-122.2-151-224-151zm0 251.7c-56 0-101.8-45.3-101.8-100.7S200 155.3 256 155.3 357.8 200.6 357.8 256 312 356.7 256 356.7zm0-161.1c-33.6 0-61.1 27.2-61.1 60.4s27.5 60.4 61.1 60.4 61.1-27.2 61.1-60.4-27.5-60.4-61.1-60.4z" fill="currentColor"></path></svg>
{/if}
</Button>
</InputAddonItem>
</div>
</Input>
<div><code>bind:value</code> when using textarea: {textareaValueText}</div>
<Input type='textarea' bind:value={textareaValueText} placeholder="Textarea works with bind:value too!"></Input>
</section>
Svelte: component source, storybook tests
Angular (Experimental)
View source
In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:
"styles": ["agnostic-angular/common.min.css"],
Add AgnosticUI's AgModule module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AgModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Now you can use in your components:
import { Component } from '@angular/core';
@Component({
selector: 'your-component',
template: `<section>
<ag-input id="1"
size="small"
placeholder="Enter name…"
label="Small input"
type="text"></ag-input>
</section>
<section>
<ag-input id="2"
placeholder="Enter name…"
label="Default input"
type="text"></ag-input>
</section>
<section>
<ag-input id="3"
size="large"
placeholder="Enter name…"
label="Large input"
type="text"></ag-input>
</section>
<section>
<ag-input id="4"
[isRounded]="true"
placeholder="Enter name…"
label="Rounded input"
type="text"></ag-input>
</section>
<section>
<ag-input id="5"
[isUnderlined]="true"
placeholder="Enter name…"
label="Underlined input"
type="text"></ag-input>
</section>
<section>
<ag-input id="6"
[isUnderlined]="true"
[isUnderlinedWithBackground]="true"
placeholder="Enter name…"
label="Underlined with background"
type="text"></ag-input>
</section>
<section>
<ag-input id="7"
helpText="Some useful help text can go here"
placeholder="Enter name…"
label="Help text"
type="text"></ag-input>
</section>
<section>
<ag-input id="8"
[isInvalid]="true"
invalidText="It's impossible to have a string that is cool enough for this field."
placeholder="Enter a very cool string…"
label="Cool factor"
type="text"></ag-input>
</section>
<section>
<ag-input id="9"
[hasLeftAddon]="true"
[hasRightAddon]="true"
label="Input with addons"
type="text">
<div addOnLeft
class="addOnLeft">
<ag-icon [size]="18"
type="error">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path fill-rule="evenodd"
d="M21.03 5.72a.75.75 0 010 1.06l-11.5 11.5a.75.75 0 01-1.072-.012l-5.5-5.75a.75.75 0 111.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 011.06 0z" />
</svg>
</ag-icon>
</div>
<div addOnRight
class="addOnRight">
<ag-icon [size]="18"
type="info">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path
d="M13 7.5a1 1 0 11-2 0 1 1 0 012 0zm-3 3.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v4.25h.75a.75.75 0 010 1.5h-3a.75.75 0 010-1.5h.75V12h-.75a.75.75 0 01-.75-.75z" />
<path fill-rule="evenodd"
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" />
</svg>
</ag-icon>
</div>
</ag-input>
</section>
<section>
<ag-input id="10"
placeholder="Enter something…"
label="Textarea"
type="textarea">
</ag-input>
</section>
<section>
<ag-input id="11"
placeholder="Enter something…"
label="Textarea small"
size="small"
[rows]="10"
[cols]="5"
type="textarea">
</ag-input>
</section>
<section>
<ag-input id="12"
placeholder="Enter something…"
label="Textarea large"
size="large"
[rows]="10"
[cols]="5"
type="textarea">
</ag-input>
</section>
<section>
<ag-input id="10"
placeholder="Enter something…"
label="Textarea"
type="textarea">
</ag-input>
</section>`
})
export class YourComponent {}
Angular: component source, storybook tests
Storybook
You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:
How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook
See Running Storybook.