Simple svelte ui - Forms components

Native HTML forms component enhanced with design to provide easy integration with Svelte.

Installation

install with npm:

1npm install @simple-svelte-ui/forms

install with yarn:

1yarn add @simple-svelte-ui/forms

Components and usage

Svelte REPL example is available here.

• colors avaliable in the library:

1 primary    : initial
2 secondary  : #6200ee
3 success    : #467d32
4 info       : #17a2b8
5 error      : #b70000
6 warning    : #caad1d
7 disabled   : #80787c

Note: when disabled color is used element will be also disabled from any further actions

• sizing avaliable for components

1    small:
2        font-size: 0.875rem , line-height:1.25rem
3
4    normal:
5        font-size: 1rem , line-height:1.5rem
6
7    large:
8        font-size: 1.125rem, line-height:1.75rem

• and when outline is set fo false only a bottom line is visible

1. Input

The input component is a basic input field with customization features.

1<script>
2    import { Input } from '@simple-svelte-ui/forms';
3    let value;
4</script>
5<input
6    bind:value
7    width="280px"
8    color="primary"
9    placeholder="Enter the value"
10    icon="bx bx-color"
11    size="normal"
12    outline="{true}"
13/>

• <i> tag is used to display icons
• actions avaliable are: on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste

2. Float input

Input component feild with floating label

1<script>
2    import { FloatInput } from '@simple-svelte-ui/forms';
3    let value;
4</script>
5<FloatInput
6    bind:value
7    width="280px"
8    color="primary"
9    placeholder="Enter the Name"
10    label="Name"
11    size="normal"
12    outline="{true}"
13/>

• actions avaliable are: on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste

3. Checkbox

To recive multipe selected options from the user

1<script>
2    import { Checkbox } from '@simple-svelte-ui/forms';
3    let checked;
4</script>
5<Checkbox color="primary"> Option 1</Checkbox>

• actions avaliable are: on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste

4. Radio

To select single value from multiple options, it uses flex to align the items.so row and column direction options are avaliable. space option is used to give space between items in column alignment

1<script>
2    import {Radio} from '@simple-svelte-ui/forms' ;
3    let group;
4    let options =[
5        'radio1',
6        'radio2',
7        'radio3'
8        ]
9</script>
10<Radio
11    bind:group
12    list={options}
13    direction="column"
14    space="auto"
15    color="primary"
16/>

• actions avaliable are: on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste

5. LayoutRadio

Its an advance radio element with capability fof displaying an image , a heading and a description

1<script>
2    import {LayoutRadio} from '@simple-svelte-ui/forms'
3    let group
4    const options=[
5        {
6            name:"Name",
7            desc:"Description",
8            img:"Image url or Local image"
9        }
10    ]
11</script>
12<LayoutRadio list={options} width="500px" bind:group />

• actions avaliable are: NIL

6. Range

Single headed range slider to slide for values within a range

1<script>
2    import {Range} from '@simple-svelte-ui/forms'
3    let value
4</script>
5<Range
6    bind:value
7    id="range"
8    min='1'
9    max='10'
10    step='1'
11    color="primary"
12/>

• actions avaliable are: on:change on:click on:keydown on:keypress on:keyup

7. Toggle

Custom checkbox with toggle switch animation

1<script>
2    import {Toggle} from '@simple-svelte-ui';
3    let checked;
4</script>
5<Toggle
6    bind:checked
7    size="normal"
8    color="primary"
9    duration="100ms"
10/>

• actions avaliable are: on:click