Input
Input is a simple input field.
Usage
import { Input } from 'stwui';
import Input from 'stwui/input';
<script lang="ts">
import { Input } from 'stwui';
</script>
<Input name="input" placeholder="Basic" />
<script lang="ts">
import { Input } from 'stwui';
</script>
<Input name="input">
<Input.Label slot="label">Label</Input.Label>
</Input>
With Leading
<script lang="ts">
import { Input } from 'stwui';
const email = "svg-path";
</script>
<Input name="input" allowClear>
<Input.Label slot="label">Label</Input.Label>
<Input.Leading slot="leading" data={email} />
</Input>
With Trailing
<script lang="ts">
import { Input } from 'stwui';
const phone = "svg-path";
</script>
<Input name="input" allowClear>
<Input.Label slot="label">Label</Input.Label>
<Input.Trailing slot="trailing" data={phone} />
</Input>
<script lang="ts">
import { Input } from 'stwui';
const email = "svg-path";
const phone = "svg-path";
</script>
<Input
name="input"
bind:value
{error}
handleLeadingClick={() => console.log('clicking leading')}
>
<Input.Label slot="label">Label</Input.Label>
<Input.Leading slot="leading" data={email} />
<Input.Trailing slot="trailing" data={phone} />
</Input>
<script lang="ts">
import { Input } from 'stwui';
</script>
<Input name="input" disabled>
<Input.Label slot="label">Label</Input.Label>
<Input.Leading slot="leading" data={email} />
</Input>
With Password
<script lang="ts">
import { Input } from 'stwui';
const lock = "svg-path";
</script>
<Input type="password" name="input" showPasswordToggle>
<Input.Label slot="label">Password</Input.Label>
<Input.Leading slot="leading" data={lock} />
</Input>
Input Props
| name | string | nanoid() |
| type | 'text' | 'email' | 'password' | text |
| error | string | undefined | |
| placholder | string | undefined | |
| value | string | undefined | |
| autocomplete | 'on' | 'off' | undefined | |
| autocapitalize | 'off' | 'none' | 'sentences' | 'words' | 'characters' | off |
| readonly | true | undefined | |
| tabindex | string | undefined | |
| showPasswordToggle | boolean | false |
| allowClear | boolean | false |
| disabled | boolean | false |
Input Slots
| label | <Input.Label slot="label" /> |
| leading | <Input.Leading slot="leading" /> |
| trailing | <Input.Trailing slot="trailing" /> |
Input.Leading Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Input.Trailing Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Input Class Identifiers
| stwui-input-wrapper |
| stwui-input |
| stwui-input-label |
| stwui-input-leading-wrapper |
| stwui-input-clear-wrapper |
| stwui-input-password-toggle-wrapper |
| stwui-input-trailing-wrapper |
| stwui-input-error-icon |
| stwui-input-error |
