# svelma-pro
用户输入控件

# Input

## 用户输入控件

Mostly just wraps `<input>` and `<textarea>` so additional Bulma features can be bound easily.

Codesandbox

    <script>
      import { Input } from 'svelma-pro'
    </script>

    <Input type="text" placeholder="Text input" />

Types and colors

Wrap with Field for additional features

Codesandbox

    // Bound values
    {
      "name": "Rich Harris",
      "email": "rich@",
      "username": "richie55",
      "password": "secret123"
    }

    undefined

Name
Email
5 / 30

Invalid email

Username

Username available

Password
Textarea
0 / 200

    <script>
      import { Field, Input } from 'svelma-pro'

      let bound = {
        name: 'Rich Harris',
        email: 'rich@',
        username: 'richie55',
        password: 'secret123',
      }
    </script>

    <Field label="Name">
      <Input type="text" bind:value={bound.name} placeholder="Text input" />
    </Field>

    <Field label="Email" type="is-danger" message="Invalid email">
      <Input type="email" bind:value={bound.email} maxlength="30" />
    </Field>

    <Field label="Username" type="is-success" message="Username available">
      <Input type="email" bind:value={bound.username} />
    </Field>

    <Field label="Password">
      <Input type="password" bind:value={bound.password} passwordReveal={true} />
    </Field>

    <Field label="Textarea">
      <Input type="textarea" maxlength="200" />
    </Field>

States, plus more styles

Codesandbox
Rounded
Info
Warning
Disabled
Loading

    <script>
      import { Field, Input } from 'svelma-pro'
    </script>

    <Field>
      <Input placeholder="No label" />
    </Field>

    <Field label="Rounded">
      <Input class="is-rounded" placeholder="Rounded" />
    </Field>

    <Field label="Info" type="is-info">
      <Input placeholder="Info" />
    </Field>

    <Field label="Warning" type="is-warning">
      <Input placeholder="Warning" />
    </Field>

    <Field label="Disabled">
      <Input placeholder="Disabled" disabled />
    </Field>

    <Field label="Loading">
      <Input placeholder="Loading" loading />
    </Field>

Sizes

Codesandbox

    <script>
      import { Field, Input } from 'svelma-pro'
    </script>

    <Field>
      <Input placeholder="Small" size="is-small" />
    </Field>

    <Field>
      <Input placeholder="Default" />
    </Field>

    <Field>
      <Input placeholder="Medium" size="is-medium" />
    </Field>

    <Field>
      <Input placeholder="Large" size="is-large" />
    </Field>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`value` | Binding value, optional | String, Number | — | —
`type` | Input type, or `textarea`, optional | String | `Any native type`, ``textarea`` | `text`
`size` | Size of input, optional | String | `is-small`, `is-medium`, `is-large` | —
`expanded` | Makes input full-width when inside a grouped or addon field | boolean | — | `false`
`passwordReveal` | Show the password reveal toggle button | boolean | — | `false`
`maxlength` | Set input maxlength and show a counter, optional | Number | — | —
`hasCounter` | Show the character counter when `maxlength`is set, optional`` | boolean | — | `true`
`loading` | Show loading indicator, optional | boolean | — | `false`
`icon` | Show this icon on left side of input, optional | String | — | —
`iconPack` | Fontawesome icon pack to use. By default the `Icon` component uses `fas`, optional | String | ``fas``, ``fab``, `etc...` | —
`disabled` | Input is disabled, optional | boolean | — | `false`