Field Types Overview All 40+ field components available in @letar/forms
Component Description Example Form.Field.StringSingle-line text input Name, email, URL Form.Field.TextareaMulti-line text input Description, comments Form.Field.PasswordPassword with visibility toggle Login forms Form.Field.MaskedInputInput with format mask Phone, credit card Form.Field.EditableInline-editable text Click to edit Form.Field.RichTextRich text editor Blog posts, articles
Component Description Example Form.Field.NumberNumeric input with stepper Quantity, age Form.Field.SliderRange slider Volume, rating Form.Field.CurrencyMoney input with currency symbol Price, salary Form.Field.PercentagePercentage input (0-100%) Discount, progress Form.Field.RatingStar rating input Reviews, feedback
Component Description Example Form.Field.SelectDropdown select Category, status Form.Field.ComboboxSearchable select with autocomplete User search Form.Field.AutocompleteText input with suggestions City, tag Form.Field.ListboxAlways-visible list selection Filters Form.Field.RadioGroupRadio button group Gender, plan Form.Field.RadioCardCard-style radio selection Pricing tier Form.Field.SegmentedGroupSegmented control View mode Form.Field.TagsTag input with autocomplete Labels, skills Form.Field.NativeSelectNative HTML select Simple dropdowns Form.Field.CascadingSelectCascading dependent selects Country → City
Component Description Example Form.Field.CheckboxStandard checkbox Terms, preferences Form.Field.SwitchToggle switch Enable/disable Form.Field.CheckboxCardCard-style checkbox Multi-select options
Component Description Example Form.Field.DateDate picker Birthday, deadline Form.Field.DateRangeDate range picker Booking period Form.Field.DateTimePickerCombined date + time Event scheduling Form.Field.TimeTime picker Appointment time Form.Field.DurationDuration input (hours/minutes) Task duration Form.Field.ScheduleWeekly schedule grid Working hours
Component Description Example Form.Field.PhonePhone number with mask Contact form Form.Field.AddressAddress autocomplete Shipping, billing Form.Field.CityCity selector Location Form.Field.FileUploadFile upload with preview Avatar, documents Form.Field.PinInputPIN code input Verification Form.Field.OTPInputOne-time password input 2FA Form.Field.ColorPickerColor selection Theme, branding
All fields share the same pattern:
< Form schema = {Schema} initialValue = {data} onSubmit = {save}> < Form.Field.String name = "fieldName" /> </ Form > The field type, label, placeholder, and validation are all derived from the Zod schema.
You only need to specify the name prop matching a key in your schema.
Override schema defaults with props:
< Form.Field.String name = "title" label = "Custom Label" placeholder = "Custom placeholder..." helperText = "Additional guidance" required />