Material

The following examples demonstrates the 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.

Colors

Preview
Code

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 TextBox component with different colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='primary' color='primary'/>
        <TextBox material label='Label' placeholder='dark' color='dark'/>
        <TextBox material label='Label' placeholder='info' color='info'/>
        <TextBox material label='Label' placeholder='warning' color='warning' />
        <TextBox material label='Label' placeholder='default' color='default'/>
        <TextBox material label='Label' placeholder='rgb(237, 20, 61)' color='rgb(237, 20, 61)'/>
        <TextBox material label='Label' placeholder='hwb(349 8% 7%)' color='hwb(349 8% 7%)'/>
        <TextBox material label='Label' placeholder='hsl(349, 86%, 50%)' color='hsl(349, 86%, 50%)' />

        <TextBox material label='Label' placeholder='secondary' color='secondary'/>
        <TextBox material label='Label' placeholder='light' color='light'/>
        <TextBox material label='Label' placeholder='success' color='success'/>
        <TextBox material label='Label' placeholder='error' color='error'/>
        <TextBox material label='Label' placeholder='crimson' color='crimson'/>
        <TextBox material label='Label' placeholder='#ed143d' color='#ed143d'/>
        <TextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' color='rgba(237, 20, 61, 0.5)'/>
        <TextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' color='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Border Colors

Preview
Code

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 TextBox component with border colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='crimson' borderColor='crimson' />
        <TextBox material label='Label' placeholder='#ed143d' borderColor='#ed143d' />
        <TextBox material label='Label' placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />

        <TextBox material label='Label' placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
        <TextBox material label='Label' placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
        <TextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Active Border Colors

Preview
Code

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 TextBox component in with active border colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='crimson' activeBorderColor='crimson' />
        <TextBox material label='Label' placeholder='#ed143d' activeBorderColor='#ed143d' />
        <TextBox material label='Label' placeholder='hwb(349 8% 7%)' activeBorderColor='hwb(349 8% 7%)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' activeBorderColor='rgba(237, 20, 61 / 0.5)' />

        <TextBox material label='Label' placeholder='rgb(237, 20, 61)' activeBorderColor='rgb(237, 20, 61)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' activeBorderColor='rgba(237, 20, 61, 0.5)' />
        <TextBox material label='Label' placeholder='hsl(349, 86%, 50%)' activeBorderColor='hsl(349, 86%, 50%)' />
        <TextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' activeBorderColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Border Width

Preview
Code

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 TextBox component with borders width.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='none (default)' borderWidth='none' />
        <TextBox material label='Label' placeholder='hairline' borderWidth='hairline' />
        <TextBox material label='Label' placeholder='thin' borderWidth='thin' />
        <TextBox material label='Label' placeholder='base' borderWidth='base' />
        <TextBox material label='Label' placeholder='thick' borderWidth='thick' />
        <TextBox material label='Label' placeholder='3' borderWidth={3}/>
      </div>
    );
  }
}

Border Radius

Preview
Code

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 TextBox component border radius.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='none' radius='none'/>
        <TextBox material label='Label' placeholder='medium' radius='medium'/>
        <TextBox material label='Label' placeholder='full radius' radius='full'/>
        <TextBox material label='Label' placeholder='small' radius='small'/>
        <TextBox material label='Label' placeholder='large' radius='large' />
        <TextBox material label='Label' placeholder='12' radius={12} />
      </div>
    );
  }
}

Background Color

Preview
Code

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 TextBox component with background colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='crimson' borderColor='crimson' />
        <TextBox material label='Label' placeholder='#ed143d' borderColor='#ed143d' />
        <TextBox material label='Label' placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />
        <TextBox material label='Label' placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
        <TextBox material label='Label' placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
        <TextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Active Background Color

Preview
Code

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 TextBox component in with activeBackgroundColor property.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='crimson' activeBackgroundColor='crimson' />
        <TextBox material label='Label' placeholder='#ed143d' activeBackgroundColor='#ed143d' />
        <TextBox material label='Label' placeholder='hwb(349 8% 7%)' activeBackgroundColor='hwb(349 8% 7%)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61 / 0.5)' activeBackgroundColor='rgba(237, 20, 61 / 0.5)' />
        <TextBox material label='Label' placeholder='rgb(237, 20, 61)' activeBackgroundColor='rgb(237, 20, 61)' />
        <TextBox material label='Label' placeholder='rgba(237, 20, 61, 0.5)' activeBackgroundColor='rgba(237, 20, 61, 0.5)' />
        <TextBox material label='Label' placeholder='hsl(349, 86%, 50%)' activeBackgroundColor='hsl(349, 86%, 50%)' />
        <TextBox material label='Label' placeholder='hsla(349, 86%, 50% / 0.5)' activeBackgroundColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Type

Preview
Code

Label

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-15 23:00:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 20:00:05
 * @ Description: Examples of TextBox component with type properties.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='outlined' type='outlined' />
        <TextBox material label='Label' placeholder='underlined' type='underlined' />
      </div>
    );
  }
}

Sizes

Preview
Code

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 TextBox component with different sizes.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='small' size='small' />
        <TextBox material label='Label' placeholder='default' size='default' />
        <TextBox material label='Label' placeholder='medium' size='medium' />
        <TextBox material label='Label' placeholder='large' size='large' />
      </div>
    );
  }
}

Readonly

Preview
Code

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 TextBox component in readonly state.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='outlined' type='outlined' readOnly />
        <TextBox material label='Label' placeholder='underlined' type='underlined' readOnly />
      </div>
    );
  }
}

Disabled

Preview
Code

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 TextBox component in readonly state.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='outlined' type='outlined' readOnly />
        <TextBox 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 TextBox component with labels.
 */

import React from 'react';
import { StyleSheet, Text, Alert, Platform } from "react-native";
import Icon from '@flexnative/icons';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material placeholder='Input with text label' label="Label" />
        <TextBox 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

/**
 * @ 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 TextBox component with custom label styles.
 */

import React from 'react';
import { StyleSheet, ColorValue, StyleProp, TextStyle } from "react-native";
import { StateCallbackType, TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material placeholder='Style with StyleProp<TextStyle>' label="Label" labelStyle={styles.label} />
        <TextBox 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 TextBox component with helper text.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox 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 TextBox component with max length, number of digits.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox 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 TextBox component with prefix.
 */

import React from 'react';
import { Alert, Platform } from 'react-native';
import Icon from '@flexnative/icons';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='Input with icon prefix' prefix="star" />
        <TextBox 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 TextBox component with prefix with custom styles.
 */

import React from 'react';
import { ColorValue, StyleProp, StyleSheet, TextStyle } from "react-native";
import { TextBox, StateCallbackType } from '@flexnative/inputs';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='Style with StyleProp<TextStyle>' prefix="star" prefixStyle={styles.prefix} />
        <TextBox 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 TextBox component with different colors.
 */

import React from 'react';
import { Alert, Platform } from "react-native";
import Icon from '@flexnative/icons';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='Input with icon suffix' suffix="star" />
        <TextBox 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 TextBox component with Suffix with custom styles.
 */

import React from 'react';
import { StyleSheet, ColorValue, StyleProp, TextStyle } from "react-native";
import { TextBox, StateCallbackType } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='Style with StyleProp<TextStyle>' suffix="star" suffixStyle={styles.prefix} />
        <TextBox 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



/**
 * @ 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 TextBox component with AdornmentSeparator.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox material label='Label' placeholder='Prefix Separator' prefix="avatar" prefixSeparator />
        <TextBox material label='Label' placeholder='Suffix Separator' suffix="avatar" suffixSeparator />
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

render(<TextBox
    prefixSeparator
    placeholder='Play with props to see live changes'
    color='primary'
    borderColor='crimson'
    borderWidth='thick'
    radius='full'
    size='large'
    prefix="star"
  />);

Result

Usecase Examples​

Colors​

Border Colors​

Active Border Colors​

Border Width​

Border Radius​

Background Color​

Active Background Color​

Type​

Sizes​

Readonly​

Disabled​

Label​

Label Style​

Helper Text​

Max Length​

Prefix​

Prefix Style​

Surfix​

Surfix Style​

Adornments Separator​

Playground​

Usecase Examples

Colors

Border Colors

Active Border Colors

Border Width

Border Radius

Background Color

Active Background Color

Type

Sizes

Readonly

Disabled

Label

Label Style

Helper Text

Max Length

Prefix

Prefix Style

Surfix

Surfix Style

Adornments Separator

Playground