kit

Number field

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On List, Form

Number field

£
£1,250.00 Before tax.
kg
2.5 kg From 0.5 to 30 kg.
1 From 1 to 12 guests.
40 From 1 to 30 seats. Enter 30 seats or fewer.
₹
₹2,50,000.00 Held until the stay ends.
%
15% Off the nightly rate.
3.5 As the studio grades it.
 min
1 min From 1 to 20 min.
Cannot be changed
kg
2.5 kg Only the owner can change this. From 0.5 to 30 kg.
Source
<div data-kit-role="form-group" data-kit-holds="help" id="number-price">
  <label for="number-price-control" id="number-price-label">Price</label>
  <div data-kit-number='{"currency":"GBP","fraction":false,"locale":"en-GB"}' data-kit-role="number-field" data-kit-width="short" id="number-price-control-number-field">
    <span data-kit-region="unit">£</span>
    <input aria-describedby="number-price-help" autocomplete="off" autocorrect="off" id="number-price-control" inputmode="decimal" spellcheck="false" type="text" value="1,250.00">
    <input type="hidden" name="price" value="1250.00">
  </div>
  <output for="number-price-control">£1,250.00</output>
  <span data-kit-region="help" id="number-price-help">Before tax.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="number-weight">
  <label for="number-weight-control" id="number-weight-label">Weight</label>
  <div data-kit-number='{"fraction":true,"locale":"en-GB","max":30,"min":0.5,"step":0.5}' data-kit-role="number-field" data-kit-width="short" id="number-weight-control-number-field">
    <input aria-describedby="number-weight-help" aria-valuemax="30" aria-valuemin="0.5" autocomplete="off" autocorrect="off" id="number-weight-control" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="2.5">
    <span data-kit-region="unit"> kg</span>
    <button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="number-weight-control-decrease" aria-label="Decrease" aria-controls="number-weight-control" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
    <button type="button" data-kit-role="icon-action" data-kit-region="increase" id="number-weight-control-increase" aria-label="Increase" aria-controls="number-weight-control" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
    <input type="hidden" name="weight" value="2.5">
  </div>
  <output for="number-weight-control">2.5 kg</output>
  <span data-kit-region="help" id="number-weight-help">From 0.5 to 30 kg.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="number-guests">
  <label for="number-guests-control" id="number-guests-label">Guests</label>
  <div data-kit-number='{"fraction":false,"locale":"en-GB","max":12,"min":1,"step":1}' data-kit-role="number-field" data-kit-width="short" id="number-guests-control-number-field">
    <input aria-describedby="number-guests-help" aria-valuemax="12" aria-valuemin="1" autocomplete="off" autocorrect="off" id="number-guests-control" inputmode="numeric" role="spinbutton" spellcheck="false" type="text" value="1">
    <button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="number-guests-control-decrease" aria-label="Decrease" aria-controls="number-guests-control" tabindex="-1" disabled><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
    <button type="button" data-kit-role="icon-action" data-kit-region="increase" id="number-guests-control-increase" aria-label="Increase" aria-controls="number-guests-control" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
    <input type="hidden" name="guests" value="1">
  </div>
  <output for="number-guests-control">1</output>
  <span data-kit-region="help" id="number-guests-help">From 1 to 12 guests.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" data-kit-state="error" id="number-seats">
  <label for="number-seats-control" id="number-seats-label">Seats</label>
  <div data-kit-number='{"fraction":false,"locale":"en-GB","max":30,"min":1,"step":1}' data-kit-role="number-field" data-kit-width="short" id="number-seats-control-number-field">
    <input aria-describedby="number-seats-help number-seats-error" aria-invalid="true" aria-valuemax="30" aria-valuemin="1" autocomplete="off" autocorrect="off" id="number-seats-control" inputmode="numeric" role="spinbutton" spellcheck="false" type="text" value="40">
    <button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="number-seats-control-decrease" aria-label="Decrease" aria-controls="number-seats-control" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
    <button type="button" data-kit-role="icon-action" data-kit-region="increase" id="number-seats-control-increase" aria-label="Increase" aria-controls="number-seats-control" tabindex="-1" disabled><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
    <input type="hidden" name="seats" value="40">
  </div>
  <output for="number-seats-control">40</output>
  <span data-kit-region="help" id="number-seats-help">From 1 to 30 seats.</span>
  <span data-kit-region="error" id="number-seats-error">Enter 30 seats or fewer.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="number-deposit">
  <label for="number-deposit-control" id="number-deposit-label">Deposit</label>
  <div data-kit-number='{"currency":"INR","fraction":false,"locale":"en-IN"}' data-kit-role="number-field" data-kit-width="short" id="number-deposit-control-number-field">
    <span data-kit-region="unit">₹</span>
    <input aria-describedby="number-deposit-help" autocomplete="off" autocorrect="off" id="number-deposit-control" inputmode="decimal" spellcheck="false" type="text" value="2,50,000.00">
    <input type="hidden" name="deposit" value="250000.00">
  </div>
  <output for="number-deposit-control">₹2,50,000.00</output>
  <span data-kit-region="help" id="number-deposit-help">Held until the stay ends.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="number-discount">
  <label for="number-discount-control" id="number-discount-label">Discount</label>
  <div data-kit-number='{"fraction":false,"locale":"en-IN"}' data-kit-role="number-field" data-kit-width="short" id="number-discount-control-number-field">
    <input aria-describedby="number-discount-help" autocomplete="off" autocorrect="off" id="number-discount-control" inputmode="numeric" spellcheck="false" type="text" value="15">
    <span data-kit-region="unit">%</span>
    <input type="hidden" name="discount" value="15">
  </div>
  <output for="number-discount-control">15%</output>
  <span data-kit-region="help" id="number-discount-help">Off the nightly rate.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="number-level">
  <label for="number-level-control" id="number-level-label">Level</label>
  <div data-kit-number='{"fraction":true,"locale":"en-GB"}' data-kit-role="number-field" data-kit-width="short" id="number-level-control-number-field">
    <input aria-describedby="number-level-help" autocomplete="off" autocorrect="off" id="number-level-control" inputmode="decimal" spellcheck="false" type="text" value="3.5">
    <input type="hidden" name="level" value="3.5">
  </div>
  <output for="number-level-control">3.5</output>
  <span data-kit-region="help" id="number-level-help">As the studio grades it.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="number-warm-up">
  <label for="number-warm-up-control" id="number-warm-up-label">Warm-up</label>
  <div data-kit-number='{"fraction":false,"locale":"en-GB","max":20,"min":1,"step":1}' data-kit-role="number-field" data-kit-width="short" id="number-warm-up-control-number-field">
    <input aria-describedby="number-warm-up-help" aria-valuemax="20" aria-valuemin="1" autocomplete="off" autocorrect="off" id="number-warm-up-control" inputmode="numeric" role="spinbutton" spellcheck="false" type="text" value="1">
    <span data-kit-region="unit">&nbsp;min</span>
    <button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="number-warm-up-control-decrease" aria-label="Decrease" aria-controls="number-warm-up-control" tabindex="-1" disabled><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
    <button type="button" data-kit-role="icon-action" data-kit-region="increase" id="number-warm-up-control-increase" aria-label="Increase" aria-controls="number-warm-up-control" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
    <input type="hidden" name="warm-up" value="1">
  </div>
  <output for="number-warm-up-control">1&nbsp;min</output>
  <span data-kit-region="help" id="number-warm-up-help">From 1 to 20 min.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="number-weight-disabled">
<label for="number-weight-disabled-control" id="number-weight-disabled-label">Weight</label>
<div data-kit-number='{"fraction":true,"locale":"en-GB","max":30,"min":0.5,"step":0.5}' data-kit-role="number-field" data-kit-width="short" id="number-weight-disabled-control-number-field">
  <input disabled aria-describedby="number-weight-disabled-help" aria-valuemax="30" aria-valuemin="0.5" autocomplete="off" autocorrect="off" id="number-weight-disabled-control" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="2.5">
  <span data-kit-region="unit"> kg</span>
  <button disabled type="button" data-kit-role="icon-action" data-kit-region="decrease" id="number-weight-disabled-control-decrease" aria-label="Decrease" aria-controls="number-weight-disabled-control" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
  <button disabled type="button" data-kit-role="icon-action" data-kit-region="increase" id="number-weight-disabled-control-increase" aria-label="Increase" aria-controls="number-weight-disabled-control" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
  <input disabled type="hidden" name="weight" value="2.5">
</div>
<output for="number-weight-disabled-control">2.5 kg</output>
<span data-kit-region="help" id="number-weight-disabled-help">Only the owner can change this. From 0.5 to 30 kg.</span>
</div>