No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Input Group
 
Svelte Input Group - Bootstrap 4 & Material Design
   
Basic Bootstrap
   
 
@
      
  
     
@example.com
 
  
https://example.com/users/
      
  
$
     
.00
 
  
With textarea
      
 
 
<script>
  import {MDBInputGroup} from 'mdbsvelte';
</script>
<MDBInputGroup class="mb-3" prepend="@" hint="Username"/>
<MDBInputGroup class="mb-3" append="@example.com" hint="Recipient's username"/>
<MDBInputGroup
  label="Your vanity URL"
  class="mb-3"
  prepend="https://example.com/users/"
  id="basic-url"
/>
<MDBInputGroup class="mb-3" prepend="$" append=".00"/>
<MDBInputGroup prepend="With textarea" type="textarea"/>

 
Material Bootstrap
   
 
@
      
  
     
@example.com
 
  
https://example.com/users/
      
  
$
     
.00
 
  
With textarea
      
 
 
<script>
  import {MDBInputGroup} from 'mdbsvelte';
</script>
<MDBInputGroup material class="mb-3 mt-0" prepend="@" hint="Username"/>
<MDBInputGroup
  material
  hint="Recipient's username"
  class="mb-3 mt-0"
  append="@example.com"
/>
<MDBInputGroup
  material
  label="Your vanity URL"
  labelclass="mb-0 ml-2"
  class="mb-3 mt-0"
  prepend="https://example.com/users/"
  id="basic-url-material"
/>
<MDBInputGroup
  material
  class="mb-3"
  prepend="$"
  append=".00"
/>
<MDBInputGroup
  material
  class="mb-0"
  prepend="With textarea"
  type="textarea"
/>

 
Sizing Basic in Bootstrap
   
 
Small
      
  
Default
      
  
Large
      
 
 
<script>
  import {MDBInputGroup} from 'mdbsvelte';
</script>
<MDBInputGroup class="mb-3" prepend="Small" size="sm" />
<MDBInputGroup class="mb-3" prepend="Default" />
<MDBInputGroup class="mb-3" prepend="Large" size="lg" />

 
Sizing in Material
   
 
Small
      
  
Default
      
  
Large
      
 
 
<script>
  import {MDBInputGroup} from 'mdbsvelte';
</script>
<MDBInputGroup
  material
  class="mb-2 mt-0"
  prepend="Small"
  size="sm"
/>
<MDBInputGroup
  material
  class="mb-2 mt-0"
  prepend="Default"
/>
<MDBInputGroup
  material
  class="mb-2 mt-0"
  prepend="Large"
  size="lg"
/>

 
Multiple Input Group
 
If you wanna use multiple inputs you can pass the inputs as a slot slot="input" 
  
 
First and last name
  
  
 
  
  
 
 
<script>
  import {MDBInputGroup, MDBInput, fragment} from 'mdbsvelte';

</script>
<MDBInputGroup
  material
  class="m-0"
  prepend="First and last name">
  <template use:fragment slot="input">
    <MDBInput type="text" class="col" hint="Type sth 1"/>
    <MDBInput type="text" class="col" hint="Type sth 2"/>
  </template>
</MDBInputGroup>

 
Multiple Addons
   
 
      
$ 
    0.00
  
 
$ 
    0.00
     
 
 
<script>
  import {MDBInputGroup, MDBInput, fragment} from 'mdbsvelte';
</script>
<MDBInputGroup class="mt-0 mb-3" material>
  <template use:fragment slot="append">
    <span class="input-group-text md-addon">$</span>
    <span class="input-group-text md-addon">0.00</span>
  </template>
</MDBInputGroup>
<MDBInputGroup class="my-0" material>
  <template use:fragment slot="prepend">
    <span class="input-group-text md-addon">$</span>
    <span class="input-group-text md-addon">0.00</span>
  </template>
</MDBInputGroup>

 
Button Addons
   
 
 
     
  
      
  
 
 
     
  
      
 
 
 
<script>
  import {MDBInputGroup, MDBInput, fragment, MDBBtn, MDBRow, MDBCol} from 'mdbsvelte';
</script>
<MDBRow>
  <MDBCol md="6" class="offset-md-3">
    <MDBInputGroup material class="mb-3 mt-0">
      <template use:fragment slot="prepend">
        <MDBBtn class="m-0 px-3 py-2 z-depth-0">
          BUTTON
        </MDBBtn>
      </template>
    </MDBInputGroup>

    <MDBInputGroup material class="mb-3 mt-0" hint="Recipient's username">
      <template use:fragment slot="append">
        <MDBBtn
          color="secondary"
          class="m-0 px-3 py-2 z-depth-0">
          BUTTON
        </MDBBtn>
      </template>
    </MDBInputGroup>

    <MDBInputGroup material class="mb-3 mt-0">
      <template use:fragment slot="prepend">
        <MDBBtn
          color="info"
          class="m-0 px-3 py-2 z-depth-1">
          BUTTON
        </MDBBtn>
        <MDBBtn
          color="info"
          class="m-0 px-3 py-2 z-depth-1">
          BUTTON
        </MDBBtn>
      </template>
    </MDBInputGroup>


    <MDBInputGroup material hint="Recipient's username" class="mb-4 mt-0">
      <template use:fragment slot="append">
        <MDBBtn color="primary" class="m-0 px-3 py-2 z-depth-1">
          BUTTON
        </MDBBtn>
        <MDBBtn
          color="primary"
          class="m-0 px-3 py-2 z-depth-1">
          BUTTON
        </MDBBtn>
      </template>
    </MDBInputGroup>
  </MDBCol>
</MDBRow>