POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/input-groups.html

   1 <div class="bs-docs-section">
   2   <h1 id="input-groups" class="page-header">Input groups</h1>
   3
   4   <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
   5
   6   <div class="bs-callout bs-callout-danger" id="callout-inputgroup-text-input-only">
   7     <h4>Textual <code>&lt;input&gt;</code>s only</h4>
   8     <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
   9     <p>Avoid using <code>&lt;textarea&gt;</code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
  10   </div>
  11   <div class="bs-callout bs-callout-warning" id="callout-inputgroup-container-body">
  12     <h4>Tooltips &amp; popovers in input groups require special setting</h4>
  13     <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
  14   </div>
  15   <div class="bs-callout bs-callout-warning" id="callout-inputgroup-dont-mix">
  16     <h4>Don't mix with other components</h4>
  17     <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
  18   </div>
  19   <div class="bs-callout bs-callout-warning" id="callout-inputgroup-form-labels">
  20     <h4>Always add labels</h4>
  21     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
  22     <p>The exact technique to be used (<code>&lt;label&gt;</code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
  23   </div>
  24
  25   <h2 id="input-groups-basic">Basic example</h2>
  26   <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
  27   <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
  28   <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
  29   <form class="bs-example bs-example-form" data-example-id="simple-input-groups">
  30     <div class="input-group">
  31       <span class="input-group-addon" id="basic-addon1">@</span>
  32       <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  33     </div>
  34     <br>
  35     <div class="input-group">
  36       <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  37       <span class="input-group-addon" id="basic-addon2">@example.com</span>
  38     </div>
  39     <br>
  40     <div class="input-group">
  41       <span class="input-group-addon">$</span>
  42       <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  43       <span class="input-group-addon">.00</span>
  44     </div>
  45   </form>
  46 {% highlight html %}
  47 <div class="input-group">
  48   <span class="input-group-addon" id="basic-addon1">@</span>
  49   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  50 </div>
  51
  52 <div class="input-group">
  53   <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  54   <span class="input-group-addon" id="basic-addon2">@example.com</span>
  55 </div>
  56
  57 <div class="input-group">
  58   <span class="input-group-addon">$</span>
  59   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  60   <span class="input-group-addon">.00</span>
  61 </div>
  62 {% endhighlight %}
  63
  64   <h2 id="input-groups-sizing">Sizing</h2>
  65   <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
  66   <form class="bs-example bs-example-form" data-example-id="input-group-sizing">
  67     <div class="input-group input-group-lg">
  68       <span class="input-group-addon" id="sizing-addon1">@</span>
  69       <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
  70     </div>
  71     <br>
  72     <div class="input-group">
  73       <span class="input-group-addon" id="sizing-addon2">@</span>
  74       <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
  75     </div>
  76     <br>
  77     <div class="input-group input-group-sm">
  78       <span class="input-group-addon" id="sizing-addon3">@</span>
  79       <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
  80     </div>
  81   </form>
  82 {% highlight html %}
  83 <div class="input-group input-group-lg">
  84   <span class="input-group-addon" id="sizing-addon1">@</span>
  85   <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
  86 </div>
  87
  88 <div class="input-group">
  89   <span class="input-group-addon" id="sizing-addon2">@</span>
  90   <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
  91 </div>
  92
  93 <div class="input-group input-group-sm">
  94   <span class="input-group-addon" id="sizing-addon3">@</span>
  95   <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
  96 </div>
  97 {% endhighlight %}
  98
  99
 100   <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
 101   <p>Place any checkbox or radio option within an input group's addon instead of text.</p>
 102   <form class="bs-example bs-example-form" data-example-id="input-group-with-checkbox-radio">
 103     <div class="row">
 104       <div class="col-lg-6">
 105         <div class="input-group">
 106           <span class="input-group-addon">
 107             <input type="checkbox" aria-label="Checkbox for following text input">
 108           </span>
 109           <input type="text" class="form-control" aria-label="Text input with checkbox">
 110         </div><!-- /input-group -->
 111       </div><!-- /.col-lg-6 -->
 112       <div class="col-lg-6">
 113         <div class="input-group">
 114           <span class="input-group-addon">
 115             <input type="radio" aria-label="Radio button for following text input">
 116           </span>
 117           <input type="text" class="form-control" aria-label="Text input with radio button">
 118         </div><!-- /input-group -->
 119       </div><!-- /.col-lg-6 -->
 120     </div><!-- /.row -->
 121   </form>
 122 {% highlight html %}
 123 <div class="row">
 124   <div class="col-lg-6">
 125     <div class="input-group">
 126       <span class="input-group-addon">
 127         <input type="checkbox" aria-label="...">
 128       </span>
 129       <input type="text" class="form-control" aria-label="...">
 130     </div><!-- /input-group -->
 131   </div><!-- /.col-lg-6 -->
 132   <div class="col-lg-6">
 133     <div class="input-group">
 134       <span class="input-group-addon">
 135         <input type="radio" aria-label="...">
 136       </span>
 137       <input type="text" class="form-control" aria-label="...">
 138     </div><!-- /input-group -->
 139   </div><!-- /.col-lg-6 -->
 140 </div><!-- /.row -->
 141 {% endhighlight %}
 142
 143
 144   <h2 id="input-groups-buttons">Button addons</h2>
 145   <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
 146   <form class="bs-example bs-example-form" data-example-id="input-group-with-button">
 147     <div class="row">
 148       <div class="col-lg-6">
 149         <div class="input-group">
 150           <span class="input-group-btn">
 151             <button class="btn btn-default" type="button">Go!</button>
 152           </span>
 153           <input type="text" class="form-control" placeholder="Search for...">
 154         </div><!-- /input-group -->
 155       </div><!-- /.col-lg-6 -->
 156       <div class="col-lg-6">
 157         <div class="input-group">
 158           <input type="text" class="form-control" placeholder="Search for...">
 159           <span class="input-group-btn">
 160             <button class="btn btn-default" type="button">Go!</button>
 161           </span>
 162         </div><!-- /input-group -->
 163       </div><!-- /.col-lg-6 -->
 164     </div><!-- /.row -->
 165   </form>
 166 {% highlight html %}
 167 <div class="row">
 168   <div class="col-lg-6">
 169     <div class="input-group">
 170       <span class="input-group-btn">
 171         <button class="btn btn-default" type="button">Go!</button>
 172       </span>
 173       <input type="text" class="form-control" placeholder="Search for...">
 174     </div><!-- /input-group -->
 175   </div><!-- /.col-lg-6 -->
 176   <div class="col-lg-6">
 177     <div class="input-group">
 178       <input type="text" class="form-control" placeholder="Search for...">
 179       <span class="input-group-btn">
 180         <button class="btn btn-default" type="button">Go!</button>
 181       </span>
 182     </div><!-- /input-group -->
 183   </div><!-- /.col-lg-6 -->
 184 </div><!-- /.row -->
 185 {% endhighlight %}
 186
 187   <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
 188   <p></p>
 189   <form class="bs-example bs-example-form" data-example-id="input-group-dropdowns">
 190     <div class="row">
 191       <div class="col-lg-6">
 192         <div class="input-group">
 193           <div class="input-group-btn">
 194             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
 195             <ul class="dropdown-menu" role="menu">
 196               <li><a href="#">Action</a></li>
 197               <li><a href="#">Another action</a></li>
 198               <li><a href="#">Something else here</a></li>
 199               <li class="divider"></li>
 200               <li><a href="#">Separated link</a></li>
 201             </ul>
 202           </div><!-- /btn-group -->
 203           <input type="text" class="form-control" aria-label="Text input with dropdown button">
 204         </div><!-- /input-group -->
 205       </div><!-- /.col-lg-6 -->
 206       <div class="col-lg-6">
 207         <div class="input-group">
 208           <input type="text" class="form-control" aria-label="Text input with dropdown button">
 209           <div class="input-group-btn">
 210             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
 211             <ul class="dropdown-menu dropdown-menu-right" role="menu">
 212               <li><a href="#">Action</a></li>
 213               <li><a href="#">Another action</a></li>
 214               <li><a href="#">Something else here</a></li>
 215               <li class="divider"></li>
 216               <li><a href="#">Separated link</a></li>
 217             </ul>
 218           </div><!-- /btn-group -->
 219         </div><!-- /input-group -->
 220       </div><!-- /.col-lg-6 -->
 221     </div><!-- /.row -->
 222   </form>
 223 {% highlight html %}
 224 <div class="row">
 225   <div class="col-lg-6">
 226     <div class="input-group">
 227       <div class="input-group-btn">
 228         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
 229         <ul class="dropdown-menu" role="menu">
 230           <li><a href="#">Action</a></li>
 231           <li><a href="#">Another action</a></li>
 232           <li><a href="#">Something else here</a></li>
 233           <li class="divider"></li>
 234           <li><a href="#">Separated link</a></li>
 235         </ul>
 236       </div><!-- /btn-group -->
 237       <input type="text" class="form-control" aria-label="...">
 238     </div><!-- /input-group -->
 239   </div><!-- /.col-lg-6 -->
 240   <div class="col-lg-6">
 241     <div class="input-group">
 242       <input type="text" class="form-control" aria-label="...">
 243       <div class="input-group-btn">
 244         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
 245         <ul class="dropdown-menu dropdown-menu-right" role="menu">
 246           <li><a href="#">Action</a></li>
 247           <li><a href="#">Another action</a></li>
 248           <li><a href="#">Something else here</a></li>
 249           <li class="divider"></li>
 250           <li><a href="#">Separated link</a></li>
 251         </ul>
 252       </div><!-- /btn-group -->
 253     </div><!-- /input-group -->
 254   </div><!-- /.col-lg-6 -->
 255 </div><!-- /.row -->
 256 {% endhighlight %}
 257
 258   <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
 259   <form class="bs-example bs-example-form" data-example-id="input-group-segmented-buttons">
 260     <div class="row">
 261       <div class="col-lg-6">
 262         <div class="input-group">
 263           <div class="input-group-btn">
 264             <button type="button" class="btn btn-default">Action</button>
 265             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 266               <span class="caret"></span>
 267               <span class="sr-only">Toggle Dropdown</span>
 268             </button>
 269             <ul class="dropdown-menu" role="menu">
 270               <li><a href="#">Action</a></li>
 271               <li><a href="#">Another action</a></li>
 272               <li><a href="#">Something else here</a></li>
 273               <li class="divider"></li>
 274               <li><a href="#">Separated link</a></li>
 275             </ul>
 276           </div>
 277           <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
 278         </div><!-- /.input-group -->
 279       </div><!-- /.col-lg-6 -->
 280       <div class="col-lg-6">
 281         <div class="input-group">
 282           <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
 283           <div class="input-group-btn">
 284             <button type="button" class="btn btn-default">Action</button>
 285             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 286               <span class="caret"></span>
 287               <span class="sr-only">Toggle Dropdown</span>
 288             </button>
 289             <ul class="dropdown-menu dropdown-menu-right" role="menu">
 290               <li><a href="#">Action</a></li>
 291               <li><a href="#">Another action</a></li>
 292               <li><a href="#">Something else here</a></li>
 293               <li class="divider"></li>
 294               <li><a href="#">Separated link</a></li>
 295             </ul>
 296           </div>
 297         </div><!-- /.input-group -->
 298       </div><!-- /.col-lg-6 -->
 299     </div><!-- /.row -->
 300   </form>
 301 {% highlight html %}
 302 <div class="input-group">
 303   <div class="input-group-btn">
 304     <!-- Button and dropdown menu -->
 305   </div>
 306   <input type="text" class="form-control" aria-label="...">
 307 </div>
 308
 309 <div class="input-group">
 310   <input type="text" class="form-control" aria-label="...">
 311   <div class="input-group-btn">
 312     <!-- Button and dropdown menu -->
 313   </div>
 314 </div>
 315 {% endhighlight %}
 316 </div>