Svelma

Name

Email is invalid

Username

Username is available

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

<Field label="Name">
  <Input value="Rich Harris" />
</Field>

<Field label="Email" type="is-danger" message="Email is invalid">
  <Input value="john@" />
</Field>

<Field label="Username" type="is-success" message="Username is available">
  <Input value="joey55" />
</Field>

Addons

Multiple controls in a field get attached. Use expanded property on the control to fill up space on the line.

<script>
  import { Button, Field, Icon, Input } from 'svelma'
</script>

<Field>
  <Input type="search" placeholder="Search" icon="search" />
  <p class="control">
    <Button type="is-primary">Search</Button>
  </p>
</Field>

<Field>
  <Input type="search" placeholder="This is expanded" expanded />
  <p class="control">
    <Button type="is-static">@gmail.com</Button>
  </p>
</Field>

<hr>

<Field>
  <div class="control"><Button><Icon icon="bold"></Icon></Button></div>
  <div class="control"><Button><Icon icon="italic"></Icon></Button></div>
  <div class="control"><Button><Icon icon="underline"></Icon></Button></div>
  <div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
  <div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
  <div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
  <Input expanded icon="comment" placeholder="Text here" />
</Field>

<Field>
  <div class="control"><Button type="is-primary">Button</Button></div>
  <div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
</Field>

Groups

Use the grouped property to group controls together. Use the expanded property to make a control take up remaining space.

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

<Field grouped>
  <Input type="search" placeholder="Search" icon="search" />
  <p class="control">
    <Button type="is-primary">Search</Button>
  </p>
</Field>

<Field grouped>
  <Input type="search" placeholder="Search" icon="search" expanded />
  <p class="control">
    <Button type="is-primary">Search</Button>
  </p>
</Field>

Nested Groups

You can nest fields inside fields. You have to use the expanded property on the Field to fill up the remaining space.

Button

Name

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

<Field grouped>
  <Field label="Button">
    <Button type="is-primary">Button</Button>
  </Field>

  <Field label="Name" expanded>
    <Input />
  </Field>

  <Field label="Email" expanded>
    <Input />
  </Field>
</Field>

Responsive Groups

Add groupMultiline property to allow controls to fill up multiple lines.

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

<Field grouped groupMultiline>
  <Input />
  {#each Array(30).fill().map((x, i) => i+1) as num}
    <div class="control">
      <Button>{num}</Button>
    </div>
  {/each}
</Field>

Positions

Use position property to align Field horizontally.

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

<Field position="is-centered">
  <Input />
  <div class="control"><Button type="is-primary">Button</Button></div>
</Field>

<Field grouped position="is-right">
  <Input />
  <div class="control"><Button type="is-primary">Button</Button></div>
</Field>

API

Name	Description	Type	Values	Default
`type`	Type (color) of the field and help message. Also adds a matching icon., optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`	—
`label`	Label for input, optional	String	—	—
`labelFor`	Same as native `for` on label, optional	String	—	—
`message`	Message to show beneath input, optional	String	—	—
`grouped`	Direct child components/elements of Field will be grouped horizontally	Boolean	—	`false`
`groupMultiline`	Allow grouped controls to cover multiple lines	Boolean	—	`false`
`position`	Alter the alignment of the field, optional	String	`is-centered`, `is-right`	—
`addons`	Automatically attach child controls together	Boolean	—	`true`