## Feature Examples

### Max length
- description: Define a max number of characters that users can write in the title with `maxLength` prop. `maxLength` includes spaces and has no default value.
- example:
```jsx
<EditableTitle initialValue="I can only write 24 char" maxLength={24} />;
```

### Auto focus
- description: Make the component ready to type in as soon as it is rendered (on mount) with `autoFocus` prop.
- example:
```jsx
<EditableTitle initialValue="Start writing now" autoFocus />;
```

### Value
- description: Control title text value with these props: - `defaultValue` - use it to display a placeholder text. It will become a title if users do not change it. - `initialValue` - use it to suggest a fitting opening title for users. They can delete and change it themselves. - `value` - use it to specify the current value of the title. Note that when users delete the `initialValue`, `defaultValue` is still shown.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <EditableTitle defaultValue="Default Value" />
  <EditableTitle initialValue="Initial Value" />
  <EditableTitle value="value" />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Giving a name for a newly created item
- description: Use Editable title in the `<Page.Header/>` when users create a new item with no default name (e.g., a product for the Store). Editable title can work in sync with Form components (e.g., writing 'Green Shoes' in the 'Name' field will automatically change the page title, too).
- example:
```jsx
() => {
  const [productName, setProductName] = React.useState('');

  return (
    <Page height="60vh">
      <Page.Header
        title=<EditableTitle
          defaultValue="Untitled Product"
          value={productName}
        />
        actionsBar={
          <Box gap="SP2">
            <Button skin="inverted">Cancel</Button>
            <Button>Save</Button>
          </Box>
        }
        breadcrumbs={
          <Breadcrumbs
            activeId="2"
            items={[
              { id: '1', value: 'Products' },
              { id: '2', value: 'Untitled Product' },
            ]}
          />
        }
      />
      <Page.Content>
        <Layout>
          <Cell span={8}>
            <Card>
              <Card.Header title="Product info" />
              <Card.Divider />
              <Card.Content>
                <Layout>
                  <Cell span={6}>
                    <FormField label="Name">
                      <Input
                        value={productName}
                        onChange={(e) => setProductName(e.target.value)}
                        placeholder="Add a product name"
                      />
                    </FormField>
                  </Cell>
                  <Cell span={6}>
                    <FormField label="Price">
                      <Input prefix={<Input.Affix>$</Input.Affix>} />
                    </FormField>
                  </Cell>
                  <Cell span={12}>
                    <FormField label="Description">
                      <RichTextInputArea minHeight="114px" maxHeight="114px" />
                    </FormField>
                  </Cell>
                </Layout>
              </Card.Content>
            </Card>
          </Cell>
        </Layout>
      </Page.Content>
    </Page>
  );
};
```