Material
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 material style.
Caution
For material style label it is required.
Actions
- Preview
- Code
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 21:59:10
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:13:08
* @ 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 material label='Label' placeholder='With actions' />
<NumericTextBox material label='Label' placeholder='Without actions' actions={false} />
</div>
);
}
}
Steps
- Preview
- Code
Label
Label
Label
Label
Label
Label
/**
* @ 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 material label='Label' placeholder='Step 1 (default)' />
<NumericTextBox material label='Label' placeholder='Step 5' step={5} />
<NumericTextBox material label='Label' placeholder='Step 10' step={10} />
<NumericTextBox material label='Label' placeholder='Step 50' step={50} />
<NumericTextBox material label='Label' placeholder='Step 100' step={100} />
<NumericTextBox material label='Label' placeholder='Step 1000' step={1000} />
</div>
);
}
}
Colors
- Preview
- Code
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:18:18
* @ 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 material label='Label' placeholder='primary' color='primary'/>
<NumericTextBox material label='Label' placeholder='dark' color='dark'/>
<NumericTextBox material label='Label' placeholder='info' color='info'/>
<NumericTextBox material label='Label' placeholder='warning' color='warning' />
<NumericTextBox material label='Label' placeholder='default' color='default'/>
<NumericTextBox material label='Label' placeholder='rgb(237, 20, 61)' color='rgb(237, 20, 61)'/>
<NumericTextBox material label='Label' placeholder='hwb(349 8% 7%)' color='hwb(349 8% 7%)'/>
<NumericTextBox material label='Label' placeholder='hsl(349, 86%, 50%)' color='hsl(349, 86%, 50%)' />
<NumericTextBox material label='Label' placeholder='secondary' color='secondary'/>
<NumericTextBox material label='Label' placeholder='light' color='light'/>
<NumericTextBox material label='Label' placeholder='success' color='success'/>
<NumericTextBox material label='Label' placeholder='error' color='error'/>
<NumericTextBox material label='Label' placeholder='crimson' color='crimson'/>
<NumericTextBox material label='Label' placeholder='#ed143d' color='#ed143d'/>
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' color='rgba(237, 20, 61, 0.5)'/>
<NumericTextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' color='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Border Colors
- Preview
- Code
Label
Label
Label
Label
Label
Label
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:41:55
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:17:55
* @ 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 material label='Label' placeholder='crimson' borderColor='crimson' />
<NumericTextBox material label='Label' placeholder='#ed143d' borderColor='#ed143d' />
<NumericTextBox material label='Label' placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox material label='Label' placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox material label='Label' placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
<NumericTextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Active Border Colors
- Preview
- Code
Label
Label
Label
Label
Label
Label
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:47:01
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:17:21
* @ 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 material label='Label' placeholder='crimson' activeBorderColor='crimson' />
<NumericTextBox material label='Label' placeholder='#ed143d' activeBorderColor='#ed143d' />
<NumericTextBox material label='Label' placeholder='hwb(349 8% 7%)' activeBorderColor='hwb(349 8% 7%)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' activeBorderColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox material label='Label' placeholder='rgb(237, 20, 61)' activeBorderColor='rgb(237, 20, 61)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' activeBorderColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox material label='Label' placeholder='hsl(349, 86%, 50%)' activeBorderColor='hsl(349, 86%, 50%)' />
<NumericTextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' activeBorderColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Border Width
- Preview
- Code
Label
Label
Label
Label
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 23:07:10
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:18:11
* @ 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 material label='Label' placeholder='none (default)' borderWidth='none' />
<NumericTextBox material label='Label' placeholder='hairline' borderWidth='hairline' />
<NumericTextBox material label='Label' placeholder='thin' borderWidth='thin' />
<NumericTextBox material label='Label' placeholder='base' borderWidth='base' />
<NumericTextBox material label='Label' placeholder='thick' borderWidth='thick' />
<NumericTextBox material label='Label' placeholder='3' borderWidth={3}/>
</div>
);
}
}
Border Radius
- Preview
- Code
Label
Label
Label
Label
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 22:50:56
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:18:05
* @ 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 material label='Label' placeholder='none' radius='none'/>
<NumericTextBox material label='Label' placeholder='medium' radius='medium'/>
<NumericTextBox material label='Label' placeholder='full radius' radius='full'/>
<NumericTextBox material label='Label' placeholder='small' radius='small'/>
<NumericTextBox material label='Label' placeholder='large' radius='large' />
<NumericTextBox material label='Label' placeholder='12' radius={12} />
</div>
);
}
}
Background Color
- Preview
- Code
Label
Label
Label
Label
Label
Label
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 22:55:08
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:17:33
* @ 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 material label='Label' placeholder='crimson' borderColor='crimson' />
<NumericTextBox material label='Label' placeholder='#ed143d' borderColor='#ed143d' />
<NumericTextBox material label='Label' placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox material label='Label' placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox material label='Label' placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
<NumericTextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Active Background Color
- Preview
- Code
Label
Label
Label
Label
Label
Label
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 22:57:49
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:16:37
* @ 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 material label='Label' placeholder='crimson' activeBackgroundColor='crimson' />
<NumericTextBox material label='Label' placeholder='#ed143d' activeBackgroundColor='#ed143d' />
<NumericTextBox material label='Label' placeholder='hwb(349 8% 7%)' activeBackgroundColor='hwb(349 8% 7%)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' activeBackgroundColor='rgba(237, 20, 61 / 0.5)' />
<NumericTextBox material label='Label' placeholder='rgb(237, 20, 61)' activeBackgroundColor='rgb(237, 20, 61)' />
<NumericTextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' activeBackgroundColor='rgba(237, 20, 61, 0.5)' />
<NumericTextBox material label='Label' placeholder='hsl(349, 86%, 50%)' activeBackgroundColor='hsl(349, 86%, 50%)' />
<NumericTextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' activeBackgroundColor='hsla(349, 86%, 50% / 0.5)' />
</div>
);
}
}
Type
- Preview
- Code
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-15 23:00:34
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:20:15
* @ 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 material label='Label' placeholder='outlined' type='outlined' />
<NumericTextBox material label='Label' placeholder='underlined' type='underlined' />
</div>
);
}
}
Sizes
- Preview
- Code
Label
Label
Label
Label
/**
* @ 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 material label='Label' placeholder='small' size='small' />
<NumericTextBox material label='Label' placeholder='default' size='default' />
<NumericTextBox material label='Label' placeholder='medium' size='medium' />
<NumericTextBox material label='Label' placeholder='large' size='large' />
</div>
);
}
}
Readonly
- Preview
- Code
Label
Label
/**
* @ 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 material label='Label' placeholder='outlined' type='outlined' readOnly />
<NumericTextBox material label='Label' placeholder='underlined' type='underlined' readOnly />
</div>
);
}
}
Disabled
- Preview
- Code
Label
Label
/**
* @ 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 material label='Label' placeholder='outlined' type='outlined' readOnly />
<NumericTextBox material label='Label' 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 23:18:50
* @ 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 material placeholder='Input with text label' label="Label" />
<NumericTextBox material 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 23:19:04
* @ 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 material placeholder='Style with StyleProp<TextStyle>' label="Label" labelStyle={styles.label} />
<NumericTextBox material 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
Label
Helper text
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:18:34
* @ 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 material label='Label' placeholder='input with helper text' helperText="Helper text" />
</div>
);
}
}
Max Length
- Preview
- Code
Label
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 material label='Label' placeholder='Max length' maxLength={15} />
</div>
);
}
}
Prefix
- 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: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 material label='Label' placeholder='Input with icon prefix' prefix="star" />
<NumericTextBox material label='Label' 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
Label
Label
/**
* @ 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 material label='Label' placeholder='Style with StyleProp<TextStyle>' prefix="star" prefixStyle={styles.prefix} />
<NumericTextBox material label='Label' 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
Label
Label
/**
* @ 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 material label='Label' placeholder='Input with icon suffix' suffix="star" />
<NumericTextBox material label='Label' 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
Label
Label
/**
* @ 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 material label='Label' placeholder='Style with StyleProp<TextStyle>' suffix="star" suffixStyle={styles.prefix} />
<NumericTextBox material label='Label' 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
Label
Label
/**
* @ Author: Redon Alla
* @ Create Time: 2024-10-14 22:35:25
* @ Modified by: Redon Alla
* @ Modified time: 2024-10-16 23:17:25
* @ 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 material label='Label' placeholder='Prefix Separator' prefix="avatar" prefixSeparator />
<NumericTextBox material label='Label' placeholder='Suffix Separator' suffix="avatar" suffixSeparator />
</div>
);
}
}
Playground
Live Editor
//Play with props to see live changes; render(<NumericTextBox prefixSeparator material label='Label' placeholder='Play with props to see live changes' color='primary' borderColor='crimson' borderWidth='thick' radius='full' size='large' prefix="star" />);
Result
Loading...