Standard text input component with icon support, validation states, and floating labels.
Basic Usage
import DInput from '@dynamic-framework/ui-react';
function App() {
const [value, setValue] = useState('');
return (
<DInput
label="Email"
value={value}
onChange={setValue}
placeholder="Enter your email"
/>
);
}
Props
Change handler that receives the input value
Input size - ‘sm’ or ‘lg’
Enables floating label style
Custom content at start of input
Custom content at end of input
Examples
Basic
With Icons
Validation
Floating Label
With Addons
<DInput
label="Username"
value={username}
onChange={setUsername}
placeholder="Enter username"
/>
<DInput
label="Search"
value={search}
onChange={setSearch}
iconStart="Search"
placeholder="Search..."
/>
<DInput
label="Email"
value={email}
onChange={setEmail}
iconEnd="Mail"
onIconEndClick={() => console.log('Icon clicked')}
/>
<DInput
label="Email"
value={email}
onChange={setEmail}
invalid={!isValidEmail(email)}
hint="Please enter a valid email"
/>
<DInput
label="Username"
value={username}
onChange={setUsername}
valid={isAvailable}
hint="Username is available"
/>
<DInput
label="Email Address"
value={email}
onChange={setEmail}
floatingLabel
/>
<DInput
label="Website"
value={url}
onChange={setUrl}
inputStart="https://"
inputEnd=".com"
/>
@react-input/mask.
Basic Usage
import DInputMask from '@dynamic-framework/ui-react';
function App() {
return (
<DInputMask
label="Phone Number"
mask="(___) ___-____"
replacement="_"
placeholder="(555) 123-4567"
/>
);
}
Props
Inherits all props from DInput plus:
Mask pattern (use underscore for input positions)
Character used in mask pattern
Examples
// Phone number
<DInputMask
label="Phone"
mask="(___) ___-____"
replacement="_"
/>
// Date
<DInputMask
label="Date"
mask="__/__/____"
replacement="_"
placeholder="MM/DD/YYYY"
/>
// Credit card
<DInputMask
label="Card Number"
mask="____ ____ ____ ____"
replacement="_"
/>
Basic Usage
import DInputPassword from '@dynamic-framework/ui-react';
function App() {
const [password, setPassword] = useState('');
return (
<DInputPassword
label="Password"
value={password}
onChange={setPassword}
/>
);
}
Props
Inherits all props from DInput except type and iconEnd.
iconEndAriaLabel
string
default:"show/hide password"
Aria label for toggle button
Example
<DInputPassword
label="Password"
value={password}
onChange={setPassword}
hint="Must be at least 8 characters"
invalid={password.length > 0 && password.length < 8}
/>
Basic Usage
import DInputPin from '@dynamic-framework/ui-react';
function App() {
const [pin, setPin] = useState('');
return (
<DInputPin
label="Enter PIN"
characters={4}
onChange={setPin}
/>
);
}
Props
type
PinInputType
default:"text"
Input type - ‘text’, ‘number’, or ‘tel’
innerInputMode
PinInputMode
default:"text"
Input mode - ‘text’, ‘numeric’, or ‘tel’
Hides input characters (password style)
Called when PIN value changes
Examples
<DInputPin
label="Security PIN"
characters={4}
onChange={setPin}
/>
<DInputPin
label="Verification Code"
characters={6}
type="number"
innerInputMode="numeric"
onChange={setCode}
/>
<DInputPin
label="PIN"
characters={4}
type="number"
secret
onChange={setPin}
/>
Basic Usage
import DInputCheck from '@dynamic-framework/ui-react';
function App() {
const [checked, setChecked] = useState(false);
return (
<DInputCheck
type="checkbox"
label="Accept terms and conditions"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
);
}
Props
Input type - ‘checkbox’ or ‘radio’
Shows indeterminate state (checkbox only)
onChange
(event: ChangeEvent<HTMLInputElement>) => void
Change handler
Examples
Checkbox
Radio Group
Indeterminate
<DInputCheck
type="checkbox"
label="Subscribe to newsletter"
checked={subscribe}
onChange={(e) => setSubscribe(e.target.checked)}
/>
<DInputCheck
type="radio"
name="plan"
label="Basic"
value="basic"
checked={plan === 'basic'}
onChange={(e) => setPlan(e.target.value)}
/>
<DInputCheck
type="radio"
name="plan"
label="Premium"
value="premium"
checked={plan === 'premium'}
onChange={(e) => setPlan(e.target.value)}
/>
<DInputCheck
type="checkbox"
label="Select all"
checked={allSelected}
indeterminate={someSelected}
onChange={handleSelectAll}
/>
Basic Usage
import DInputSwitch from '@dynamic-framework/ui-react';
function App() {
const [enabled, setEnabled] = useState(false);
return (
<DInputSwitch
label="Enable notifications"
checked={enabled}
onChange={setEnabled}
/>
);
}
Props
onChange
(checked: boolean) => void
Called when switch is toggled
Example
<DInputSwitch
label="Dark mode"
checked={darkMode}
onChange={setDarkMode}
/>
<DInputSwitch
label="Two-factor authentication"
checked={twoFactor}
onChange={setTwoFactor}
disabled={!isVerified}
/>