ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯐ꯭ꯂꯣꯇꯤꯡ ꯂꯦꯕꯦꯂꯁꯤꯡ꯫

ꯅꯍꯥꯛꯀꯤ ꯏꯅꯄꯨꯠ ꯐꯤꯜꯗꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ ꯆꯦꯅꯕꯥ ꯐꯖꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯐꯣꯔꯝ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫

ꯈꯨꯗꯝ

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯐꯣꯔꯝ ꯐꯤꯜꯗꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐ꯭ꯂꯣꯇꯤꯡ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯅꯕꯥ <input class="form-control">ꯑꯃꯁꯨꯡ <label>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯄꯦꯌꯥꯔ ꯑꯃꯥ ꯔꯦꯞ ꯇꯧ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.-ꯈꯛꯇꯒꯤ ꯑꯣꯏꯕꯥ ꯐ꯭ꯂꯣꯇꯤꯡ ꯂꯦꯕꯦꯂꯁꯤꯡꯒꯤ ꯃꯦꯊꯗ ꯑꯁꯤꯅꯥ ꯄ꯭ꯁꯨꯗꯣ-ꯏꯂꯤꯃꯦꯟꯇ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ .form-floatingꯑꯦ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤꯗꯁꯨ ꯅꯠꯇꯅꯥ ꯈꯉꯖꯤꯅꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤꯕꯂꯤꯡ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯅꯕꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯂꯥꯀꯄꯥ ꯃꯊꯧ ꯇꯥꯏ꯫placeholder<input>:placeholder-shown<input>~

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

valueꯍꯥꯟꯅꯅꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯑꯃꯥ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ , <label>sꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯐ꯭ꯂꯣꯠ ꯇꯧꯔꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯒꯅꯤ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

ꯐꯣꯔꯝ ꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯁꯨ ꯊꯥꯖꯕꯥ ꯌꯥꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯕꯛ ꯇꯧꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

ꯇꯦꯛꯁꯇꯥꯏꯜ ꯑꯦꯔꯤꯌꯥꯁꯤꯡ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, <textarea>s with .form-controlꯑꯁꯤ sꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯋꯥꯡꯕꯥ <input>ꯑꯣꯏꯒꯅꯤ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

ꯅꯍꯥꯛꯀꯤ <textarea>, ꯀꯁ꯭ꯇꯝ ꯍꯥꯏꯠ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ, rowsꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯒꯅꯨ. ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧ height(ꯏꯅꯂꯥꯏꯟ ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ)꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

ꯈꯅꯒꯠꯂꯤ꯫

ꯅꯠꯇꯅꯥ .form-control, ꯐ꯭ꯂꯣꯇꯤꯡ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯑꯁꯤ .form-selectꯑꯦꯁ. ꯃꯈꯣꯌꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯑꯦꯁ.ꯒꯥ ꯃꯥꯟꯅꯗꯅꯥ <input>, ꯃꯈꯣꯌꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ <label>ꯃꯁꯤꯒꯤ ꯐ꯭ꯂꯣꯇꯦꯗ ꯁ꯭ꯇꯦꯠꯇꯥ ꯎꯠꯀꯅꯤ꯫ ꯂꯣꯌꯅꯅꯥ ꯈꯅꯒꯠꯂꯤ sizeꯑꯃꯁꯨꯡ multipleꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

ꯔꯤꯗꯑꯣꯅꯂꯤ ꯄ꯭ꯂꯦꯅꯇꯦꯛꯁ꯫

ꯐ꯭ꯂꯣꯇꯤꯡ ꯂꯦꯕꯦꯂꯁꯤꯡꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯁꯨ ꯌꯥꯏ , ꯃꯁꯤꯅꯥ ꯄꯦꯖ ꯂꯦꯑꯥꯎꯇꯇꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯗꯅꯥ .form-control-plaintextꯑꯦꯗꯤꯠ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯃꯗꯒꯤ ꯄ꯭ꯂꯦꯅꯇꯦꯛꯁ ꯚꯦꯜꯌꯨ ꯑꯃꯗꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯗꯥ ꯃꯇꯦꯡ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫<input>

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

ꯐ꯭ꯂꯣꯇꯤꯡ ꯂꯦꯕꯦꯂꯁꯤꯡꯅꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯏ .input-group.

@
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ .input-groupꯑꯃꯁꯨꯡ .form-floatingꯐꯣꯔꯝ ꯚꯦꯂꯤꯗꯦꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯒꯤ -feedbackꯃꯄꯥꯟꯗꯥ ꯊꯃꯒꯗꯕꯅꯤ .form-floating, ꯑꯗꯨꯕꯨ ꯃꯅꯨꯡꯗꯥ .input-group. ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯐꯤꯗꯕꯦꯛ ꯑꯗꯨ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯎꯠꯄꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫

@
ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯌꯨꯖꯔꯅꯦꯝ ꯑꯃꯥ ꯈꯜꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

ꯌꯥꯠꯊꯣꯛꯄ

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯐꯣꯔꯝ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯣꯌꯗꯅꯥ ꯊꯝꯃꯨ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;