Sections
Components
- AlertBanner
- AlertDialog
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- CalendarIcon
- CellLayout
- CellLink
- Checkbox
- Collapse
- ContentSwitcher
- ControlLabel
- DatePicker
- Dialog
- Divider
- Drawer
- EmptyCell
- EmptyState
- Empty
- ErrorOverlay
- FilterBar
- FilterChips
- Flex
- GridLayout
- HumanisedDate
- Icon
- InputDuration
- InputField
- Input
- Label
- Loader
- MoreActions
- NumberInput
- OutsideClickHandler
- PageLoader
- Page
- Popconfirm
- Popover
- ProgressPie
- Progress
- RadioButtonGroup
- RadioGroup
- Radio
- RelativeTime
- Resizable
- SearchInput
- Select
- SkeletonText
- Skeleton
- Space
- SquadAvatarList
- StatusPicker
- Stepper
- Switch
- TableLight
- Tabs
- Tag
- Text
- Textarea
- Toast
- Tooltip
- TriggerSelect
- Upload
import { InputField } from "@/rl-ui";
<InputField label="Name" placeholder="Ada Lovelace" />Examples#
Helper states#
import { InputField } from "@/rl-ui";
<>
<InputField label="Email" helperText="We'll never share this." placeholder="you@acme.com" />
<InputField label="Budget" helperTextType="warning" helperText="Approaching limit" defaultValue="9800" />
<InputField label="Slug" helperTextType="error" helperText="Already taken" defaultValue="acme" />
</>Sizes#
import { InputField } from "@/rl-ui";
<>
<InputField size="small" label="Small" />
<InputField size="medium" label="Medium" />
<InputField size="large" label="Large" />
</>Required & disabled#
import { InputField } from "@/rl-ui";
<>
<InputField label="Company" required placeholder="Acme Inc" />
<InputField label="Tenant" disabled defaultValue="rocketlane" />
</>API#
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Field label. |
size | "small" | "medium" | "large" | "medium" | Control height. |
helperText | string | — | Hint or validation message. |
helperTextType | "error" | "warning" | "info" | "info" | Helper tone. |
required | boolean | false | Marks the field required. |
tooltip | string | — | Info tooltip on the label. |
startAddons | ReactNode[] | [] | Leading addons. |
endAddons | ReactNode[] | [] | Trailing addons. |
disabled | boolean | false | Prevents editing. |
readOnly | boolean | false | Read-only value. |