TextField Component

Import

import { TextField } from 'rohit-ui';

Examples

Basic TextField

// Basic text field with placeholder
<TextField placeholder="Type here..." />

TextField with Label

Name:

// Text field with label and value
<TextField label="Name" value="Michael Scott" />

Disabled TextField

// Disabled text field
<TextField value="Can't touch this" disabled />

TextField with onChange Handler

// Controlled text field with state
const [value, setValue] = useState("Dynamic");

<TextField 
  value={value} 
  onChange={e => setValue(e.target.value)} 
/>

Rohit Mode TextField

// Rohit Mode text field
<TextField value="Why is this shaking?" rohitMode />

Note: In Rohit Mode, the text field will wiggle, randomly change its value, and sometimes refuse to accept input.

Props

Name	Type	Default	Description
label	string	-	Label text displayed next to the text field
value	string	-	Value of the text field
placeholder	string	-	Placeholder text
disabled	boolean	false	Disables the text field
onChange	function	-	Function called when the value changes
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the TextField component using styled-components:

import styled from 'styled-components';
import { TextField } from 'rohit-ui';

const CustomTextField = styled(TextField)`
  .textfield-input {
    background: white;
    border: 2px solid var(--win98-navy);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.1em;
    color: var(--win98-navy);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    
    &:focus {
      outline: none;
      border-color: var(--win98-hot-pink);
      box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2);
    }
  }
  
  .textfield-label {
    font-family: 'Comic Sans MS', sans-serif;
    color: var(--win98-navy);
    font-size: 1.1em;
    margin-bottom: 4px;
  }
`;

function MyComponent() {
  return (
    <CustomTextField
      label="Custom TextField"
      value={value}
      onChange={setValue}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the TextField component will:

Wiggle or bounce randomly
Change its value unexpectedly
Sometimes refuse to accept input
Draw unnecessary attention to itself