svelma-pro

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

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

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

Types and colors

Wrap with Field for additional features

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

undefined

Name

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

Rounded

Info

Warning

Disabled

<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

<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`