Input Field
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Input Field is a input field component with support for placeholder animation, validation status, error messages, and an optional icon.
1. Reference
This component inherits props from the Input Field.
2. Type
You can edit the type with the default, disabled, success or error parameter.
Image 2.1 : Type default
Image 2.2 : Type success
Image 2.3 : Type disabled
Image 2.4 : Type error
3. Size
You can edit the size with the sm, md or lg parameter.
Image 3.1 : Size lg
Image 3.2 : Size md
Image 3.3 : Size sm
4. State
You can edit the state with the default, active or filled parameter.
Image 4.1 : State default
Image 4.2 : State active
Image 4.3 : State filled
5. iconLeft
You can edit the iconLeft with the true or false parameter.
Image 5.1 : iconLeft false
Image 5.2 : iconLeft true
6. iconRight
You can edit the iconRight with the true or false parameter.
Image 6.1 : iconRight false
Image 6.1 : iconRight true
SwiftUI
The DLInputField is a input field component with support for placeholder animation, validation status, error messages, and an optional icon.
1. Reference
This component inherits props from the Input Field.
-
-
-
-
-
2. Type
You can edit the type with the .none, .icon, .warning, .success or .error parameter.
3. Size
You can edit the size with the .sm, .md or .lg parameter.
4. State
You can edit the state with the .normal or .disabled parameter.
Jetpack Compose
The InputField is a input field component with support for placeholder animation, validation status, error messages, and an optional icon.
1. Reference
This component inherits props from the Input Field.
-
-
2. Type
You can edit the type with the .none, .icon, .warning, .success or .error parameter.
size = InputFieldSize.lg,
placeholder = "Input Field",
text = normalText.value,
onValueChange = {
normalText.value = it
}
)
InputField(
size = InputFieldSize.lg,
text = successText.value,
isSuccess = true,
placeholder = "Input Field",
onValueChange = {
successText.value = it }
)
InputField(
size = InputFieldSize.lg,
state = InputFieldState.disabled,
placeholder = "Input Field",
text = disableText.value,
onValueChange = {
disableText.value = it
}
)
InputField(
size = InputFieldSize.lg,
isError = true,
errorText = "Description",
placeholder = "Input Field",
text = errorText.value,
onValueChange = { errorText.value = it }
)
3. Size
You can edit the size with the InputFiledSize.sm, InputFiledSize.md or InputFiledSize.lg parameter.
4. State
You can edit the state with the .normal or .disabled parameter.
React Native
The CustomInputField is a input field component with support for placeholder animation, validation status, error messages, and an optional icon.
1. Reference
This component inherits props from the Input Field.
-
-
2. Type
You can edit the type with the default, warning, success or error parameter.
import CustomInputField from '../../components/common/CustomInputField';
export default function ScreenName() {
const [inputValue, setInputValue] = useState('Default Value');
return (
<View>
<CustomInputField
size={lg}
placeholder={"Input Field"}
type={default}
/>
<CustomInputField
size={lg}
placeholder={"Input Field"}
type={success}
/>
<CustomInputField
size={lg}
placeholder={"Input Field"}
type={warning}
/>
<CustomInputField
size={lg}
placeholder={"Input Field"}
type={error}
error={"Description"}
/>
</View>
);
}
3. Icon
You can edit the iconLeft an iconRight with the "icon" parameter.
import PlusIcon from '../../../assets/icons/svg_js/plusIcon';
import CustomInputField from '../../components/common/CustomInputField';
export default function ScreenName() {
const [inputValue, setInputValue] = useState('Default Value');
return (
<View>
<CustomInputField
size={lg}
placeholder={"Input Field"}
iconLeft={<PlusIcon />}
/>
<CustomInputField
size={lg}
placeholder={"Input Field"}
iconRight={<PlusIcon />}
/>
</View>
);
}
4. Size
You can edit the size with the sm, md or lg parameter.
import CustomInputField from '../../components/common/CustomInputField';
export default function ScreenName() {
const [inputValue, setInputValue] = useState('Default Value');
return (
<View>
<CustomInputField
size={lg}
placeholder={"Input Field"}
/>
<CustomInputField
size={md}
placeholder={"Input Field"}
/>
<CustomInputField
size={sm}
placeholder={"Input Field"}
/>
</View>
);
}
5. State
You can edit the state with the default or disabled parameter.
import CustomInputField from '../../components/common/CustomInputField';
export default function ScreenName() {
const [inputValue, setInputValue] = useState('Default Value');
return (
<View>
<CustomInputField
size={lg}
placeholder={"Input Field"}
state={default}
/>
<CustomInputField
size={lg}
placeholder={"Input Field"}
state={disabled}
/>
</View>
);
}
Discover more content
You have questions or need help?
You want to try?
Save time and money?