Default
The following examples demonstrates the Numeric Text Boxes in action.
warning
In documentation apprence of components may not be in correct way. To view the component in exact design please view the demo app.
Usecase Examples
Usecase Examples with default style.
Actions
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 21:59:10
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:15:22
* @ Description: Examples of NumericTextBox component with actions.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='With actions' />
<NumericTextBox placeholder='Without actions' actions={false} />
</div>
);
}
}
Steps
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:06:09
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:18:58
* @ Description: Examples of NumericTextBox component increment / decrement steps.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Step 1 (default)' />
<NumericTextBox placeholder='Step 5' step={5} />
<NumericTextBox placeholder='Step 10' step={10} />
<NumericTextBox placeholder='Step 50' step={50} />
<NumericTextBox placeholder='Step 100' step={100} />
<NumericTextBox placeholder='Step 1000' step={1000} />
</div>
);
}
}
Colors
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:18:09
* @ Description: Examples of NumericTextBox component with different colors.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='primary' color='primary'/>
<NumericTextBox placeholder='dark' color='dark'/>
<NumericTextBox placeholder='info' color='info'/>
<NumericTextBox placeholder='warning' color='warning' />
<NumericTextBox placeholder='default' color='default'/>
<NumericTextBox placeholder='rgb(237, 20, 61)' color='rgb(237, 20, 61)'/>
<NumericTextBox placeholder='hwb(349 8% 7%)' color='hwb(349 8% 7%)'/>
<NumericTextBox placeholder='hsl(349, 86%, 50%)' color='hsl(349, 86%, 50%)' />
<NumericTextBox placeholder='secondary' color='secondary'/>
<NumericTextBox placeholder='light' color='light'/>
<NumericTextBox placeholder='success' color='success'/>
<NumericTextBox placeholder='error' color='error'/>
<NumericTextBox placeholder='crimson' color='crimson'/>
<NumericTextBox placeholder='#ed143d' color='#ed143d'/>
<NumericTextBox placeholder='rgba(237, 20, 61, 0.5)' color='rgba(237, 20, 61, 0.5)'/>
<NumericTextBox placeholder='hsla(349, 86%, 50% / 0.5)' color='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Border Colors
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:41:55
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:17:16
* @ Description: Examples of NumericTextBox component with border colors.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='crimson' borderColor='crimson' />
<NumericTextBox placeholder='#ed143d' borderColor='#ed143d' />
<NumericTextBox placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
<NumericTextBox placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
<NumericTextBox placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
<NumericTextBox placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Active Border Colors
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:47:01
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:16:32
* @ Description: Examples of NumericTextBox component in with active border colors.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='crimson' activeBorderColor='crimson' />
<NumericTextBox placeholder='#ed143d' activeBorderColor='#ed143d' />
<NumericTextBox placeholder='hwb(349 8% 7%)' activeBorderColor='hwb(349 8% 7%)' />
<NumericTextBox placeholder='rgba(237, 20, 61 / 0.5)' activeBorderColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox placeholder='rgb(237, 20, 61)' activeBorderColor='rgb(237, 20, 61)' />
<NumericTextBox placeholder='rgba(237, 20, 61, 0.5)' activeBorderColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox placeholder='hsl(349, 86%, 50%)' activeBorderColor='hsl(349, 86%, 50%)' />
<NumericTextBox placeholder='hsla(349, 86%, 50% / 0.5)' activeBorderColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Border Width
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 23:07:10
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:17:51
* @ Description: Examples of NumericTextBox component with borders width.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='none (default)' borderWidth='none' />
<NumericTextBox placeholder='hairline' borderWidth='hairline' />
<NumericTextBox placeholder='thin' borderWidth='thin' />
<NumericTextBox placeholder='base' borderWidth='base' />
<NumericTextBox placeholder='thick' borderWidth='thick' />
<NumericTextBox placeholder='3' borderWidth={3}/>
</div>
);
}
}
Border Radius
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 22:50:56
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:17:34
* @ Description: Examples of NumericTextBox component border radius.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='none' radius='none'/>
<NumericTextBox placeholder='medium' radius='medium'/>
<NumericTextBox placeholder='full radius' radius='full'/>
<NumericTextBox placeholder='small' radius='small'/>
<NumericTextBox placeholder='large' radius='large' />
<NumericTextBox placeholder='12' radius={12} />
</div>
);
}
}
Background Color
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 22:55:08
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:16:58
* @ Description: Examples of NumericTextBox component with background colors.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='crimson' borderColor='crimson' />
<NumericTextBox placeholder='#ed143d' borderColor='#ed143d' />
<NumericTextBox placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
<NumericTextBox placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
<NumericTextBox placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
<NumericTextBox placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Active Background Color
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 22:57:49
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:15:50
* @ Description: Examples of NumericTextBox component in with activeBackgroundColor property.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='crimson' activeBackgroundColor='crimson' />
<NumericTextBox placeholder='#ed143d' activeBackgroundColor='#ed143d' />
<NumericTextBox placeholder='hwb(349 8% 7%)' activeBackgroundColor='hwb(349 8% 7%)' />
<NumericTextBox placeholder='rgba(237, 20, 61 / 0.5)' activeBackgroundColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox placeholder='rgb(237, 20, 61)' activeBackgroundColor='rgb(237, 20, 61)' />
<NumericTextBox placeholder='rgba(237, 20, 61, 0.5)' activeBackgroundColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox placeholder='hsl(349, 86%, 50%)' activeBackgroundColor='hsl(349, 86%, 50%)' />
<NumericTextBox placeholder='hsla(349, 86%, 50% / 0.5)' activeBackgroundColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Type
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 23:00:34
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:20:10
* @ Description: Examples of NumericTextBox component with type properties.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='outlined' type='outlined' />
<NumericTextBox placeholder='underlined' type='underlined' />
</div>
);
}
}
Sizes
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-16 20:51:10
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:18:24
* @ Description: Examples of NumericTextBox component with different sizes.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='small' size='small' />
<NumericTextBox placeholder='default' size='default' />
<NumericTextBox placeholder='medium' size='medium' />
<NumericTextBox placeholder='large' size='large' />
</div>
);
}
}
Readonly
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-16 20:53:54
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:11:15
* @ Description: Examples of NumericTextBox component in readonly state.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='outlined' type='outlined' readOnly />
<NumericTextBox placeholder='underlined' type='underlined' readOnly />
</div>
);
}
}
Disabled
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-16 20:53:54
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 21:11:15
* @ Description: Examples of NumericTextBox component in readonly state.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='outlined' type='outlined' readOnly />
<NumericTextBox placeholder='underlined' type='underlined' readOnly />
</div>
);
}
}
Label
- Preview
- Code
Label
Custom Element Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 22:35:48
* @ Description: Examples of NumericTextBox component with labels.
*/
import React from 'react';
import { StyleSheet, Text, Alert, Platform } from "react-native";
import Icon from '@flexnative/icons';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Input with text label' label="Label" />
<NumericTextBox placeholder='Input with custom element as label' label={<Label />} />
</div>
);
}
}
function Label() {
const openAlert = () =>
Platform.OS === 'web'
? alert('Custom Element as label')
: Alert.alert('Alert Title', 'Custom Element as label', [
{text: 'OK'},
]);
return <Text style={styles.label}>
<Icon name="avatar" onPress={openAlert} /> Custom Element Label
</Text>;
}
const styles = StyleSheet.create({
label: {
color: 'crimson'
},
row: {
columnGap: 16,
flexDirection: "row",
width: '100%',
backgroundColor: 'transparent'
},
column: {
flex: 1,
rowGap: 16,
alignContent: 'center',
justifyContent: 'space-evenly',
backgroundColor: 'transparent'
}
});
Label Style
- Preview
- Code
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 22:38:18
* @ Description: Examples of NumericTextBox component with custom label styles.
*/
import React from 'react';
import { StyleSheet, ColorValue, StyleProp, TextStyle } from "react-native";
import { StateCallbackType, NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Style with StyleProp<TextStyle>' label="Label" labelStyle={styles.label} />
<NumericTextBox placeholder='Style with function' label="Label" labelStyle={labelStyles('rgb(35, 189, 224)', 'crimson')} />
</div>
);
}
}
const labelStyles = (defaultColor: ColorValue, activeColor: ColorValue) => {
return (state: StateCallbackType): StyleProp<TextStyle> => {
return [
{
color: state.focused ? activeColor : defaultColor
}
]
}
}
const styles = StyleSheet.create({
label: {
color: 'crimson'
}
});
Helper Text
- Preview
- Code
Helper text
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 22:42:14
* @ Description: Examples of NumericTextBox component with helper text.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='input with helper text' helperText="Helper text" />
</div>
);
}
}
Max Length
- Preview
- Code
0 / 15
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 22:47:07
* @ Description: Examples of NumericTextBox component with max length, number of digits.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Max length' maxLength={15} />
</div>
);
}
}
Prefix
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 22:51:08
* @ Description: Examples of NumericTextBox component with prefix.
*/
import React from 'react';
import { Alert, Platform } from 'react-native';
import Icon from '@flexnative/icons';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Input with icon prefix' prefix="star" />
<NumericTextBox placeholder='Input with custom element as prefix' prefix={<Prefix />} />
</div>
);
}
}
function Prefix() {
const openAlert = () =>
Platform.OS === 'web'
? alert('Custom Element as prefix')
: Alert.alert('Alert Title', 'Custom Element as prefix', [
{text: 'OK'},
]);
return <Icon name="avatar" onPress={openAlert} />;
}
Prefix Style
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 22:54:54
* @ Description: Examples of NumericTextBox component with prefix with custom styles.
*/
import React from 'react';
import { ColorValue, StyleProp, StyleSheet, TextStyle } from "react-native";
import { NumericTextBox, StateCallbackType } from '@flexnative/inputs';
export default class extends React.PureComponent {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Style with StyleProp<TextStyle>' prefix="star" prefixStyle={styles.prefix} />
<NumericTextBox placeholder='Style with function' prefix="star" prefixStyle={prefixStyle('rgb(35, 189, 224)', 'crimson')} />
</div>
);
}
}
const prefixStyle = (defaultColor: ColorValue, activeColor: ColorValue) => {
return (state: StateCallbackType): StyleProp<TextStyle> => {
return [
{
color: state.focused ? activeColor : defaultColor
}
]
}
}
const styles = StyleSheet.create({
prefix: {
color: 'crimson'
}
});
Surfix
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:04:40
* @ Description: Examples of NumericTextBox component with different colors.
*/
import React from 'react';
import { Alert, Platform } from "react-native";
import Icon from '@flexnative/icons';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Input with icon suffix' suffix="star" />
<NumericTextBox placeholder='Input with custom element as suffix' suffix={<Suffix />} />
</div>
);
}
}
function Suffix() {
const openAlert = () =>
Platform.OS === 'web'
? alert('Custom Element as suffix')
: Alert.alert('Alert Title', 'Custom Element as suffix', [
{text: 'OK'},
]);
return <Icon name="avatar" onPress={openAlert} />;
}
Surfix Style
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:06:26
* @ Description: Examples of NumericTextBox component with Suffix with custom styles.
*/
import React from 'react';
import { StyleSheet, ColorValue, StyleProp, TextStyle } from "react-native";
import { NumericTextBox, StateCallbackType } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Style with StyleProp<TextStyle>' suffix="star" suffixStyle={styles.prefix} />
<NumericTextBox placeholder='Style with function' suffix="star" suffixStyle={suffixStyle('rgb(35, 189, 224)', 'crimson')} />
</div>
);
}
}
const suffixStyle = (defaultColor: ColorValue, activeColor: ColorValue) => {
return (state: StateCallbackType): StyleProp<TextStyle> => {
return [
{
color: state.focused ? activeColor : defaultColor
}
]
}
}
const styles = StyleSheet.create({
prefix: {
color: 'crimson'
}
});
Adornments Separator
- Preview
- Code
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:09:39
* @ Description: Examples of NumericTextBox component with AdornmentSeparator.
*/
import React from 'react';
import { NumericTextBox } from '@flexnative/inputs';
export default class extends React.PureComponent<{}, {}> {
render() {
return (
<div className='example-block form-input'>
<NumericTextBox placeholder='Prefix Separator' prefix="avatar" prefixSeparator />
<NumericTextBox placeholder='Suffix Separator' suffix="avatar" suffixSeparator />
</div>
);
}
}
Playground
Live Editor
//Play with props to see live changes; render(<NumericTextBox prefixSeparator placeholder='Play with props to see live changes' color='primary' borderColor='crimson' borderWidth='thick' radius='full' size='large' prefix="star" />);
Result
Loading...