Wondering what’s next for npm?Check out our public roadmap! »

    svelte-labeled-input

    0.1.16 • Public • Published

    svelte-labeled-input

    • Web-component: <labeled-input></labeled-input>
    • or Svelte-component: import LabeledInput from 'svelte-labeled-input'

    css3 layout label transition input text field validates errormessage password style

    GIF from the labeled input field

    Try out live example:

    Published on webcomponents.org

    Install

    npm install svelte-labeled-input
    

    Donate

    Usage

    Import the component.

        import LabeledInput from 'svelte-labeled-input'
    

    Use the component.

        <LabeledInput name="prename"
                      placeholder="Your prename"
                      label="Prename:"
                      bind:value={prename}/>
    

    The styled and labeled input "html"-element offers the optional parameters:

        export let name;        // Name of the component in DOM
        export let placeholder; // Placeholder for no input value
        export let value;       // Value of the input field. 
        export let label;       // Label of the input field
    
        export let type         // default "text" or "password" for dotted input values.
        export let validator;   // boolean function. Evaluates to true or false
        export let errormessage;// Errormessage for validation error
    

    Web-Component

    <custom-element-demo>
    <template>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width,initial-scale=1'>
        <title>Generic Crud Table</title>
        <link rel='icon' type='image/png' href='favicon.png'>
        <link rel='stylesheet' href='https://ivosdc.github.io/svelte-labeled-input/build/labeled-input.css'>
        <script defer src='https://ivosdc.github.io/svelte-labeled-input/build/labeled-input.js'></script>
    </head>
    <body>
    <hr>
    <labeled-input name="prename"
                   placeholder="Your prename"
                   label="Prename:"
                   value=""></labeled-input>
    <labeled-input name="fullname"
                   placeholder="Your family name"
                   label="Name:"
                   value=""></labeled-input><hr>
    </body>
    <script>
    </script>
    </template>
    </custom-element-demo>
    
    <labeled-input></labeled-input>

    Svelte-Component:

    <script>
        import LabeledInput from 'svelte-labeled-input'
    
        let prename;
        let fullname;
    
        // Example validator: Prename can only have 3 chars
        const prenameValidator = (value) => {
            return (value.length > 3) ? false : true;
        }
    </script>
    
    <main>
        <hr>
        <LabeledInput name="prename"
                      errormessage="Prename can only have 3 characters."
                      validator={prenameValidator(prename)}
                      placeholder="Your prename"
                      label="Prename:"
                      bind:value={prename}/>
        <LabeledInput name="fullname"
                      placeholder="Your name"
                      label="Family name:"
                      bind:value={fullname}/>
        <LabeledInput name="password"
                      placeholder="Enter password"
                      label="Password:"
                      type="password"
                      bind:value={password}/>
    </main>
    
    

    Install

    npm i svelte-labeled-input

    DownloadsWeekly Downloads

    7

    Version

    0.1.16

    License

    MIT

    Unpacked Size

    52.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar