Components
InlineField
The dense-grid sibling of Field: same 48px height and label treatment, but it supports a read-only mode and a monospace value, so it doubles as a display row.
Web-only — inline-field.web.tsx has no native counterpart.
It shares a row with SelectField in address and contact grids, which is why
the two agree on height and on the 14px gap below the label.
function Controlled({ initial = '', ...props }: { initial?: string } & Omit<React.ComponentProps<typeof InlineField>, 'value'>) {
const [value, setValue] = React.useState(initial);
return <InlineField {...props} value={value} onChangeText={setValue} />;
}
<View style={{ maxWidth: 420 }}>
<Controlled {...args} />
</View>Import
import { InlineField } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
label | — | "Trading name" | Sits above the box and stays visible. |
placeholder | — | "Simal" | Shown while empty. In readonly mode it renders as an em dash fallback instead. |
readonly | boolean | false | Renders the value as text in the same box rather than an input. Use for values a user may see but not change — it keeps grid alignment that a plain label would break. |
mono | boolean | false | Renders the value in the monospace face. For references, IDs and phone numbers where digit alignment matters. |
numeric | boolean | false | Strips non-digits on change and switches to a number pad. |
error | — | — | Any non-empty string turns the border red and renders the message below. |
disabled | boolean | false | Dims the box and blocks pointer events entirely. |
maxLength | — | — | Hard cap on input length, enforced by the input itself. |
aux | — | — | Small trailing text inside the box, right-aligned — a unit or a remaining-character count. |
fullWidth | boolean | false | Adds flex-1 so the field fills its row. Off by default so it can sit at natural width. |
value | — | "" | Controlled. Pair with onChangeText unless readonly. |
onChangeText | — | — | Omit it to get a read-only box without setting readonly explicitly. |
Examples
Read Only
readonly keeps the box, so a display value still lines up with the editable field beside it.
function Controlled({ initial = '', ...props }: { initial?: string } & Omit<React.ComponentProps<typeof InlineField>, 'value'>) {
const [value, setValue] = React.useState(initial);
return <InlineField {...props} value={value} onChangeText={setValue} />;
}
<View className="flex-row gap-5" style={{ maxWidth: 640 }}>
<Controlled label="Editable" initial="Simal" fullWidth />
<Controlled label="Read only" initial="AB-0042" readonly mono fullWidth />
</View>Monospace
Monospace is for values read digit by digit, where a proportional face makes comparison harder.
function Controlled({ initial = '', ...props }: { initial?: string } & Omit<React.ComponentProps<typeof InlineField>, 'value'>) {
const [value, setValue] = React.useState(initial);
return <InlineField {...props} value={value} onChangeText={setValue} />;
}
<View className="gap-5" style={{ maxWidth: 420 }}>
<Controlled label="Reference" initial="AB-0042-XY" mono />
<Controlled label="Phone" initial="9800000000" mono numeric />
</View>States
function Controlled({ initial = '', ...props }: { initial?: string } & Omit<React.ComponentProps<typeof InlineField>, 'value'>) {
const [value, setValue] = React.useState(initial);
return <InlineField {...props} value={value} onChangeText={setValue} />;
}
<View className="gap-5" style={{ maxWidth: 420 }}>
<Controlled label="Default" placeholder="Type here" />
<Controlled label="With error" initial="12" error="Must be 9 digits." />
<Controlled label="Disabled" initial="Cannot edit" disabled />
</View>