@jill64/svelte-input

ActionButton #

Button component with visual feedback to wait for Promise.

Disable

$status = IDLE

▽ Code

<script>
  import { ActionButton } from '@jill64/svelte-input'

  const actionHandler = async () => {
    await delay(1500)
    $toast.success('Action Complete')
  }
</script>

<ActionButton
  onClick={actionHandler}
  label="Action Button"
  let:status
>
  ＋
</ActionButton>

CheckBox #

Labeled checkbox to support bindable indeterminate value input.

Disable

value = null

▽ Code

<script>
  import { CheckBox } from '@jill64/svelte-input'
</script>

<CheckBox bind:value >
  Check Box
</CheckBox>

Check Box

CheckList #

A checkbox list component that binds inputs structured as object.

Disable

value = { "First": null, "Second": null, "Third": null }

▽ Code

<script>
  import { CheckList } from '@jill64/svelte-input'
</script>

<fieldset>
  <CheckList bind:value let:item>
    {item}
  </CheckList>
</fieldset>

First Second Third

Decimal #

Integer input with control buttons.

Min

Max

Disable

value = 0

▽ Code

<script>
  import { Decimal } from '@jill64/svelte-input'
</script>

<fieldset>
  <Decimal bind:value min="0" max="10" />
</fieldset>

FileInput #

Quickly configure file input with custom styles applied.

Disable

value =

▽ Code

<script>
  import { FileInput } from '@jill64/svelte-input'
</script>

<FileInput bind:value >
  <div>
    Custom File Input
  </div>
</FileInput>

<style>
  div {
    padding: "8px 16px";
    background: "#77F";
    /* ... */
  }
</style>

Custom File Input

Radio #

Component that applies input bound to a group to a radio button array.

Disable

value = Alpha

▽ Code

<script>
  import { Radio } from '@jill64/svelte-input'
</script>

<fieldset>
  <Radio list={['Alpha', 'Beta', 'Gamma']} bind:value let:item >
    {item}
  </Radio>
</fieldset>

<style>
  fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* ... */
  }
</style>

Alpha Beta Gamma

TextArea #

<textarea> component that automatically expands input fields according to input content.

Disable

value =

▽ Code

<script>
  import { TextArea } from '@jill64/svelte-input'
</script>

<TextArea
  bind:value
  placeholder="Auto Growing Text Area"
  padding="0.5rem"
  style="width: 90%; max-height: 300px; border-radius: 0.5rem;"
/>

ToggleSwitch #

Pre-styled <input type="checkbox"> compatible toggle switch component.

Disable

value = false

▽ Code

<script>
  import { ToggleSwitch } from '@jill64/svelte-input'
</script>

<ToggleSwitch bind:value >
  Toggle Switch
</ToggleSwitch>

Toggle Switch

Select #

Declarative list input with multiple variations quickly creates semantic pull-down menus.

Grouped Options Disable

value =

▽ Code

<script>
  import { Select } from '@jill64/svelte-input'
</script>

<Select
  list={{ One: 'One', Two: 'Two', Three: 'Three', A: 'a', B: 'b', C: 'c' }}
  bind:value
  style="background: inherit; padding: 0.5rem; font-size: large; color: inherit; border: 1px solid #888;"
/>