Component Props

label

It can be extended to have a label HTMLElement as a wrapper for the input. This way both the label and input are implicitly linked without the need for the attributes "id" and "for".

[JSX] Component

<Input label="First Name" />

error

This prop is useful for telling the user when they've made a mistake. When adding any string as an error message, it is displayed under the input. For theming the component automatically changes the background to an error-signaling color.

[JSX] Component

<Input error="That username already exists." />

maxWidth

Occasionally there is a requirement for inputs to stretch to the with of their container. The adjustment only goes toward larger containers, even with a false maxWidth the inputs adjust their width to smaller wrappers.

[JSX] Component

<Input maxWidth />

Element Attributes

placeholder

This attribute must provide a brief hint to the user for the expected input information. It must be short and not an explanation or prompt. Ideally, it should teach a valid input example.

[JSX] Component

<Input placeholder="Ana" />

type

This attribute contains a string that specifies the input control that is going to be used. This includes different types of textboxes like "password" or "tel" and non-box inputs like "checkbox" or "range".

[JSX] Component

<Input type="date" />

required

This boolean attribute indicates that an input field in a form must be filled before sending the form data. The required attribute automátically sets a sup element with the standard asterisk. For the theme, the required asterisk will be colored using the error color.

[JSX] Component

<Input required />

disabled

This is a boolean attribute that indicates that the user should not be able to interact with the input. Disabled inputs have deactivated their click events. The theme itself has a particular variable for the background color in disabled inputs.

[JSX] Component

<Input disabled />

Other inputs

checkbox and radios

Checkboxes and radios can be used as stand-alone toggles, but for them to work as intended, one should use the Fieldset component instead.

[JSX] Component

<Input type="checkbox" />
<Input type="radio" />

button

This type of input is very useful for sending form data and must be used instead of the Button component if that is the use case. For any other use case, the Button component will suffice. For the theme, input buttons will use the main background for uniformity.

[JSX] Component

<Input type="button" />
<Input type="image" />
<Input type="submit" />
<Input type="reset" />

TextArea

The <TextArea /> component is used to create a multi-line text input field where users can enter text, such as comments, messages, or articles. It allows for the input of large blocks of text and can be resized using the rows and cols attributes.

[JSX] TextArea component

import { TextArea } from 'ana-components';

export default function () {
    return <TextArea />;
}

[HTML] Rendered HTML

<label>
  <span><!-- Label --></span>
  <textarea />
</label>

noResize

This property sets the style resize: none; to the textarea element. This is helpful because these should not be resizable in some use cases.

[JSX] Component

<TextArea noResize />

TextArea

The <TextArea /> component is used to create a multi-line text input field where users can enter text, such as comments, messages, or articles. It allows for the input of large blocks of text and can be resized using the rows and cols attributes.

[JSX] TextArea component

import { Select } from 'ana-components';

export default function () {
    return <Select placeholder="Placeholder" options={["a", "b", "c"]} />;
}

[HTML] Rendered HTML

<label>
  <span><!-- Label --></span>
  <select>
      <option value selected hidden>Placeholder</option>
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
  </select>
</label>

options

The options property is used to set the selectable options. It can be an array of strings where every item will create an option with every item being the name and value of the option <option value="item">item</option>. Also, an array of types {name: string, value: string} can also be used.

<Select options={[{ name: "A", value: "a" }]} />