INPUT.md

Input

Input fields let users enter and edit text.

Element

<div class="field">
  <input type="text">
</div>

Most used helpers

Forms

label, border, round, fill, prefix, suffix

Sizes

small, medium, large, extra

Triggers

active

Example

<div class="field label border">
  <input type="text">
  <label>Label</label>
</div>

Triggers

To up/down a label

Method 1

Add/remove active class on label/input (the JS file of beer do this automatically).

<div class="field label">
  <input type="text" class="active">
  <label class="active">Label</label>
</div>

<div class="field label border">
  <input type="text" class="active">
  <label class="active">Label</label>
</div>

Method 2

• Add placehholder=" " on input (a pure CSS solution).

<div class="field label">
  <input type="text" placeholder=" ">
  <label>Label</label>
</div>

<div class="field label border">
  <input type="text" placeholder=" ">
  <label>Label</label>
</div>

Go to

Begin, Elements, Helpers, Settings, Summary, beercss.com

Badge, Button, Card, Checkbox, Chip, Container, Dialog, Expansion, Grid, Icon, Input, Layout, List, Main layout, Media, Menu, Navigation, Overlay, Page, Progress, Radio, Select, Slider, Switch, Table, Tabs, Textarea, Snackbar, Tooltip, Typography