Form controls
Entering and changing data on a phone: every target 44px or more, pickers as bottom sheets.
Try it Buttons Input Textarea Select Combobox Cloth picker Checkbox Switch Date Money Tags Uploader Form
Try it
Selects, combobox and dates open as bottom sheets with 52px rows.
Tap a field: it opens a sheet from the bottom, like the phone’s own pickers.
.k-sheet.k-bottom[data-k-stage].k-scrim.fc-bopt--e-phone-sheet--motion-sheet-inButtons
44px tall, 48px for the main action. No hover on touch.
.btn.lg--control-h-m--control-h-m-lgField layout and input
Label on top, help or error below. Text is 16px so the phone never zooms.
Filled from the anchor cloth.
Locked after the first save.
Weight required: the cloth has none.
.lbl.input.fc-in.help.err--control-h-mTextarea with counter
Counter sits on the label row; the bar fills as you type.
Amber from 144, red past 160.
.fc-ta.fc-count.fc-meterdata-fc-maxSelect
A sheet, not a dropdown: 52px rows, colour dot and a reason under each.
.k-sheet.k-bottom.static.fc-bopt.fc-stat--r-frameCombobox
Search pinned at the top of the sheet, list grouped by mill.
.fc-bs-s.fc-pop-g.fc-boptCloth picker
A full screen list: 44px swatches, filters scroll sideways, more loads at the bottom.
.fc-mlist.fc-mcl.fc-pill.fc-hscroll.fc-sw8.lg.fc-savebarCheckbox and radio
Each option is a full 52px row, so the label is the target too.
.fc-ck.cb.cb[type=radio].fc-rcard.fc-mrowSwitch and segmented control
Switches sit at the row’s right edge; segments fill the width.
.switch.fc-mrow.seg.seg-iDate and date range
Calendar in a sheet with 44px days; ranges add presets above.
.fc-cal.fc-cal-g.fc-pill.k-sheet.k-bottom.staticMoney and price group
Decimal keypad, tabular figures; each currency line stacks with its remove button in reach.
HQ hasn’t confirmed RJ Clothing’s EUR list.
Your price list’s currency isn’t confirmed
Check these EUR prices before you add the product.
- HS 81045€1,320.00
- HS 81046€1,320.00
- HS 81052€1,365.00
USD needs an amount, or remove the line.
.fc-money.fc-unv.fc-confirm.fc-pg.fc-plinputmode=decimalTag input
Tags grow to 32px with a 28px remove target.
Tap Done or comma to add. Up to 10.
.fc-tags.fc-tagFile and photo uploader
Three across on the phone; reordering gets its own list with arrows as well as drag.
Press and hold a row to drag it, or use the arrows.
.fc-slots.fc-reorder.fc-ro-idata-fc-move.fc-drop.fc-fileForm section layout
Sections stack: title, one line of purpose, fields; the save bar sticks to the bottom.
Basics
What brands see first.
Price
Brands can change it above the floor.
.fc-form.fc-form-b.fc-savebar